Why do I need to nest a component with rendered=“#{some}” in another component when I want to ajax-update it?

大憨熊 提交于 2019-11-25 21:57:52

问题


So I\'ve found a few answers close to this, and I\'ve found enough to fix the problem I had. But even so, I\'m curious as to understand the workings around this. Let me illustrate with an example :

I have a facelet .xhtml page that looks like this (shortned).

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

Now, for the sake of breivity, I will not post all the backing bean code, but I have something of this sort :

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

Where searchResults is an ArrayList<Objects>. After a search, it is not null - checked in multiple tests (can be null, but not in the testing I am doing).

Now. This does NOT work.

But if I nest the dataTable inside another, let\'s say panelGroup, it will work.

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

Now, this changes allows everything to work fine. I\'d be okay with this... but I guess I am seeking a bit of understanding as well. Any insight as to why I have to nest these components? I am surely missing something!


回答1:


Ajax updating is performed by JavaScript language in the client side. All which JavaScript has access to is the HTML DOM tree. If JSF does not render any component to the HTML output, then there's nothing in the HTML DOM tree which can be obtained by JavaScript upon Ajax update. JavaScript cannot get the desired element by its ID.

It will only work if you wrap the conditionally JSF-rendered component in another component which is always rendered to the HTML output and thus always present in the HTML DOM tree and thus always obtainable by JavaScript. Reference that wrapper component instead during ajax render/update.

See also:

  • Communication in JSF2 - Ajax rendering of content which is by itself conditionally rendered


来源:https://stackoverflow.com/questions/9010734/why-do-i-need-to-nest-a-component-with-rendered-some-in-another-component-w

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!