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

Question

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!

Solution

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

Comments

[blo0p3r]

Perfect! That was the explanation I needed. I was under the impression that the JavaScript was using id's to update the DOM. Thanks for the enlightenment!

[Kukeltje]

Maybe this answer could be enhanced to contain some errors that might occur like the one in stackoverflow.com/questions/30307378/…