f:ajax and client-side components

[nimo frey]

why does jsf 2.0 ajax does not recognize client-side tags?


For example, this works:

Version 1:

<h:form>

     <h:commandButton value="make" action="#{bean.make}">
            <f:ajax render=":grid"/>
     </h:commandButton>
</h:form>  

 
<h:panelGrid id="grid">
       <h:outputText value="#{bean.makeValue}" />
</h:panelGrid>

while this is not working (because I use the tag html-tag <div> instead of a jsf-tag):


Version 2:

<h:form>

     <h:commandButton value="make" action="#{bean.make}">
             <f:ajax render=":grid"/>
      </h:commandButton>
</h:form> 
 

<div id="grid">
        <h:outputText value="#{bean.makeValue}" />
</div>

Why is Version 2 not working? Can I only use JSF-Tags in combination with f:ajax?

[Tim Holloway]

If you use the "Display page source" feature of your browser on both those pages, I think you'll see that the actual ID attributes of the JSF and div components are not quite the same.

[nimo frey]

I was looking at the html-source (via firebug) and cannot find a different ID:

ajax works with id h:panelGrid.

I replaced h:panelGrid with div (which has the same id):

<h:commandButton id="myCommand" value="make" action="#{bean.make}">  
            <f:ajax render=":grid"/>  
</h:commandButton>

<div id="grid">
..
</div>

and then I get this error:

<f:ajax> contains an unknown id ':grid' - cannot locate it in the context of the component myCommand.

Looking at the "Component Tree", it shows me my div:

<HtmlForm>
...
</HtmlForm>
<div id="grid">
...
</div>

[Tim Holloway]

That punctuation is part of the ID. In other words: ":grid" is a completely different ID from "grid".

[nimo frey]

Yes, I have tried it with "grid":

<h:commandButton id="myCommand" value="make" action="#{bean.make}">    
          <f:ajax render="grid"/>    
</h:commandButton>  
  
<div id="grid">  
..  
</div> 

but I get the same failure:

<f:ajax> contains an unknown id 'grid' - cannot locate it in the context of the component myCommand.

The debug-page offers the "Component Tree", I looked in it and found my id "grid". So it still exists! Strange..

[Tim Holloway]

Not as strange as you think. Take a look at the HTML generated for a JSF control. You should see that the HTML ID for "grid" is actually something more like "formId:grid". That's because JSF supports something called "naming containers".

Which brings up a point. I hope you've got your commandButton in a JSF form! Otherwise it won't work right.

[nimo frey]

I found the problem.

The problem lies in the JSF 2.0 specification:

JSF 2.0 AJAX-Tag can only update JSF-Tags and not HTML-Tags.

So we have to enclose HTML-Tags (which should be updated) by a JSF-Tag (such as h:panelGrid).