By blo0p3r


2012-01-25 21:41:30 8 Comments

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 comments

@BalusC 2012-01-25 21:45:35

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:

@blo0p3r 2012-01-25 22:11:12

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 2015-05-18 16:05:58

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

Related Questions

Sponsored Content

1 Answered Questions

1 Answered Questions

[SOLVED] Programmatically control which components should be ajax-updated

4 Answered Questions

[SOLVED] Render a component only when validation success

3 Answered Questions

[SOLVED] JSF f:ajax listener not called

  • 2012-03-24 00:56:16
  • twmb
  • 14970 View
  • 0 Score
  • 3 Answer
  • Tags:   ajax jsf listener

1 Answered Questions

2 Answered Questions

[SOLVED] JSF Ajax rerender <h:textInput ...> on Change

  • 2013-08-14 14:41:17
  • dngfng
  • 1445 View
  • 0 Score
  • 2 Answer
  • Tags:   jsf jsf-2

1 Answered Questions

JSF2: why does empty test in rendered of panelGroup in composite prevent action from being called?

  • 2012-03-07 03:00:24
  • Webel IT Australia - upvoter
  • 4329 View
  • 0 Score
  • 1 Answer
  • Tags:   jsf jsf-2

1 Answered Questions

Sponsored Content