f:ajax render outside form problem

Question

Hello,
I have a problem with Ajax partial rendering. My (simplified) situation is as follows:
Code (in one xhtml page):
<h:body>
<h:form>
<f:ajax render=":content" listener="#{myListener.update}">
<cu:menu value="#{customBackingBean.value}"/>
</f:ajax>
</h:form>
<h:form id="content">
<h:outputText value="#{myBean.value}"/h>
</h:form>
</h:body>
Flow (how I want it):
1. <cu:menu> component renders an html link like: Click
2. Clicking on this link should first call the ajax listener #{myListener.update}. This listeners changes the value of '#{myBean.value}'.
3. Now the component with id 'content' should be re-rendered and show the updated value of '#{myBean.value}'
However, in reality step 2 and 3 are switched, so first the rendering is done, then the listener is called. So only after the second click I see a content change.
Any ideas how to handle this?
Update:*
I changed the code a little bit because I had a feeling that the behavior is because of the fact that I want to render something outside of the form.
Code (in one xhtml page):
<h:body>
<h:form>
<f:ajax render="test :content" listener="#{myListener.update}">
<cu:menu value="#{customBackingBean.value}"/>
</f:ajax>
<h:outputText id="test" value="#{myBean.value}"/h>
</h:form>
<h:form id="content">
<h:outputText value="#{myBean.value}"/h>
</h:form>
</h:body>
Now I added a similar <h:outputtext> component within the ajax form, which uses the same EL value #{myBean.value}. When I now click on a link (generated by the <cu:menu> component the outputtext within the same form is rendered after the listener is called and therefor immediately reflects the change of the value while the outputtext component outside of the form is rendered before the listener is called, and therefore it still shows the previous value.
Edited by: Robe Eleckers on 3-dec-2010 1:47

Answer 1

Generally, when you use ajax you don't need the <h:commandButton> anymore. The commandButton still does what it does even when you add an ajax tag to it.
Try adding an ajax tag to your <h:inputText> elements with the valueChange event attribute, and render="o1" like you have it. You should see the outputText update the way you expect.