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>

<h:form/>jQuery Mobile ポップアップはポップアップ内にタグを必要とするため、明らかに上記のマークアップはユーザー入力をサーバーに送信しません。しかし、<h:form/>ポップアップ内にタグを入れると使えません<f:ajax render="greeting"/>(id「greeting」が外に出てしまうため)。

ボイラープレート Javascript コードを使用せずにこの問題を解決するにはどうすればよいですか?

4

1 に答える 1

1

では絶対クライアント ID のみを使用できます<f:ajax render>。JSFNamingContainer区切り文字 (デフォルトは ) で開始すると、.:に対して相対的に解決されUIViewRootます。だからあなたはただ使うことができますrender=":greeting"。

ところで、別の問題があります。参照および更新できる HTML DOM ツリーには何もないため、JSF/サーバー側でレンダリングされないJS/Ajax/クライアント側のコンポーネントを更新することはできません。常にレンダリングされる<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>

（属性のEL式を単純化したことに注意してくださいrendered。式自体がすでにブール値の結果を返しているときに、条件演算子を使用してブール値の結果を返すことは意味がありませんrendered="#{not empty login}"。

以下も参照してください。

于 2012-09-07T12:13:47.597 に答える