How to update an element outside the form using h: ajax command in jsf2?

Question

How to update an element outside of a form using ajax rendering.

<ui:repeat var="o"> <h:form> <h:panelGroup id="someid"> ... </h:panelGroup> <div> <h:commandButton action="#{o.doSomething}"> <f:ajax event="action" render="someid :rehreshthistoo" /> </h:commandButton> </div> <h:form> </ui:repeat> <h:panelGroup id="rehreshthistoo"> ... </h:panelGroup> 

Answer 1

Your code looks great. Although it only works if <h:panelGroup id="rehreshthistoo"> is not already in the other UINamingContainer component, or if you have not changed the default JSF naming container delimiter : to something else like _ or - .

The final answer should be found in the source HTML source generated by JSF. Open the page in a browser, right-click and select "Source Source", find the generated <span> <h:panelGroup id="rehreshthistoo"> , and then use its identifier in your <f:ajax render> with a separator naming container as a prefix. If it contains the automatically generated identifier of some UINamingContainer parent, then you must also specify a fixed ID for this parent component.

See also:

• JSF 2.0 communication - Ajax rendering of content outside of a form