web-dev-qa-db-ja.com

コンポーネントをajax-updateしたいのに、なぜ別のコンポーネントにrendered = "＃{some}"でコンポーネントをネストする必要があるのですか？

だから私はこれに近い答えをいくつか見つけました、そして私が抱えていた問題を修正するのに十分なことがわかりました。しかし、それでも、この周りの仕組みを理解したいのですが。例を挙げて説明します。

私はfaceletを持っています.xhtmlこのようなページ（短縮）。

<h:form id="resultForm">

    <h:panelGroup class="search_form" layout="block">
        <h:inputText id="lastname" value="#{search.lastname}"/>
        <h:commandButton action="#{search.find}" value="Find">
            <f:ajax execute="lastname" render="resultDisplay"/>
        </h:commandButton>
    </h:panelGroup>

    <h:dataTable value="#{search.searchResults}" var="results" id="resultDisplay"
            rendered="#{!empty search.searchResults}">  
        <h:column>
            #{results.field}
        </h:column>
    </h:dataTable>

</h:form>

ここで、簡潔にするために、すべてのバッキングBeanコードを投稿することはしませんが、次のようなものがあります。

public void find() {
    searchResults = setResults(true);
}

ここで、searchResultsはArrayList<Objects>。検索後、それはnullではありません-複数のテストでチェックされます（nullになる可能性がありますが、私が行っているテストではありません）。

今。これは動作しません。

しかし、dataTableを別の中にネストすると、panelGroupとすると、機能します。

<h:panelGroup id="resultDisplay">
    <h:dataTable value="#{search.searchResults}" var="results"
        rendered="#{!empty search.searchResults}">  
        <h:column>
            #{results.field}
        </h:column>
    </h:dataTable>
</h:panelGroup>

現在、この変更により、すべてが正常に機能します。私はこれで大丈夫だと思います...しかし、私も少し理解を求めていると思います。これらのコンポーネントをネストする必要がある理由についての洞察はありますか？きっと何かが足りない！

jsfjsf-2faceletsconditional-renderingajax-update
32
blo0p3r

Ajaxの更新は、クライアント側でJavaScript言語によって実行されます。 JavaScriptがアクセスできるのは、HTML DOMツリーだけです。 JSFがコンポーネントをHTML出力にレンダリングしない場合、Ajaxの更新時にJavaScriptによって取得できるHTML DOMツリーには何もありません。 JavaScriptは、IDで目的の要素を取得できません。

条件付きでJSFでレンダリングされたコンポーネントを、alwaysがHTML出力にレンダリングされ、したがってalwaysHTML DOMツリーに存在するため、JavaScriptでalwaysを取得できます。代わりに、ラッパーコンポーネントをajaxレンダリング/更新中に参照します。

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

62
BalusC