Question

考虑以下JSF（＆amp; jQuery Mobile）标记：

<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>

显然上面的标记不会将用户输入发送到服务器，因为jQuery Mobile弹出窗口需要弹出窗口中的<h:form/>标签。但是如果我将<h:form/>标记放在弹出窗口中，我就不能使用<f:ajax render="greeting"/>（因为id“问候”留在了外面）。

如何在不使用样板Javascript代码的情况下解决此问题？

Answer 1

您可以在<f:ajax render>中使用绝对客户端ID。如果您从JSF NamingContainer分隔符开头，默认为:，那么它将相对于UIViewRoot进行解析。所以你可以使用render=":greeting"。

你顺便说一下另一个问题。您无法更新JS / Ajax /客户端中的组件，这些组件本身不是在JSF /服务器端呈现，只是因为HTML DOM树中没有任何内容可以被引用和更新。您需要将<h:outputText id="greeting">包装在另一个始终呈现的组件中。

所以，总而言之，这应该适合你：

<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>

（注意我已经简化了rendered属性中的EL表达式，使用条件运算符返回布尔结果是没有意义的，而表达式本身已经返回一个布尔结果;我' d顺便说一下，我自己更喜欢rendered="#{not empty login}"

在JSF中使用jQuery Mobile弹出窗口

1 个答案:

另见：