1

考虑以下 JSF（和 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 "greeting" 留在了外面）。

如何在不使用样板 Javascript 代码的情况下克服这个问题？

4

1 回答 1

1

您可以在<f:ajax render>. 如果您以 JSFNamingContainer分隔符开头，默认为:，那么它将相对于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 表达式，使用条件运算符返回布尔结果是没有意义的，而表达式本身已经返回布尔结果；顺便说一下，我自己更喜欢rendered="#{not empty login}"）

也可以看看：

于 2012-09-07T12:13:47.597 回答