Using jQuery Mobile popup with JSF

Question

Consider the following JSF (& jQuery Mobile) markup:

<h:form>

            <a href="#login" data-rel="popup">Please login</a>


            <h:outputText id="greeting" value="Welcome, you have logged in" rendered="#{sessionScope.login == null ? false : true}"/>

            <div id="login" data-role="popup">

            <h:inputText value="#{requestScope.userName}"/>
            <h:inputHidden value="#{requestScope.password}"/>
            <h:commandButton value="login" action="#{loginBacking.processLogin}">
                <f:ajax execute="@form" render="greeting"/>
            </h:commandButton>

            </div>

</h:form>

Obviously the above markup will not send the user input to the server, because jQuery Mobile popup needs <h:form/> tag inside popup. But if I put the <h:form/> tag inside popup, I cannot use <f:ajax render="greeting"/> (because the id "greeting" left outside).

How can I overcome this issue without using boilerplate Javascript codes?

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You can just use absolute client IDs in <f:ajax render>. If you start with the JSF NamingContainer separator character, which defaults to :, then it will be resolved relative to the UIViewRoot. So you can just use render=":greeting".

You've by the way another problem. You cannot update components in JS/Ajax/client side which are by itself not rendered in JSF/server side, simply because there's then nothing in the HTML DOM tree which can be referenced and updated. You need to wrap the <h:outputText id="greeting"> in another component which is always rendered.

So, all with all, this should do for you:

<a href="#login" data-rel="popup">Please login</a>

<h:panelGroup id="greeting">
    <h:outputText value="Welcome, you have logged in" rendered="#{login != null}"/>
</h:panelGroup>

<div id="login" data-role="popup">
    <h:form>
        <h:inputText value="#{requestScope.userName}"/>
        <h:inputHidden value="#{requestScope.password}"/>
        <h:commandButton value="login" action="#{loginBacking.processLogin}">
            <f:ajax execute="@form" render=":greeting"/>
        </h:commandButton>
    </h:form>
</div>

(note that I have simplified the EL expression in the rendered attribute, it makes no sense to use a conditional operator to return boolean results while the expression by itself already returns a boolean result; I'd myself have preferred rendered="#{not empty login}" by the way)

Using jQuery Mobile popup with JSF

1 Answers1

See also: