JSF 2.0 Ajax navigation problem

Question

Hello
I have some problem with new AJAX functionality of JSF 2.0.
I want to do the navigation between two pages via AJAX because it looks more smooth and I have the possibility to show a wait screen during the server request.
Here is a short example. I have two facelet page (page1.xhtml and page2.xhtml)
page1.xhtml
<h:form>
        <h:commandLink value="Go to page 2" action="page2">
            <f:ajax render="@all" execute="@all"/>
        </h:commandLink>
</h:form>
.....page2.xhtml
<h:form>
            <h:commandLink value="Go to page 1" action="page1">
                <f:ajax render="@all" execute="@all"/>
            </h:commandLink>
</h:form>
....The example is very simple. Two pages and on each page is a link to navigate to the other page. I open the page1.xhtml in my browser and I click on the link. The first request is processed as expected. The second pages is displayed successfully. Now I want to go back to the other page. If I click on the link ("Go to page 1") nothing happens. If I click a second time on the link the navigation is working agian. Why I have to click twice? Is this a bug or feature of jsf? Do I use the <f:ajax> feature wrong?
I did some investigations with firebug and what I can see is that after the second click on page2.xhtml a hidden field is available.
<input type="hidden" name="javax.faces.ViewState" value="-6158142916843935211:2501145469136072012">
If I add this hidden field via firebug into the page the navigaiton back to the first page is working after the first click. Why is this hidden field only after the second click available?
Any ideas what I'm doing wrong?
Thanks in advance

Answer 1

I found the problem and a solution :-) The missing piece of the puzzle was the id attribute for the form tag. After some debugging of the JSF JavaScript I found the solution.
The JavaScript function response(request, context) is invoked to handle the server response. Inside this function the doUpdate(element, context) is invoked.
The doUpdate() function is doing the modification of the DOM. The function doUpdate() is two times invoked for a response. The first time the html elements are updated.
The second time the view state hidden field is updated or created but only under the following condition:
Comment in the JavaScript source code of the jsf.js
//Now set the view state from the server into the DOM
//but only for the form that submitted the request.If the forms of the both side haven't the same id the form can't be found on the second page.
In the following way it is working:
page1.xhtml
<h:form id="myform">
        <h:commandLink value="Go to page 2" action="page2">
            <f:ajax render="@all" execute="@all"/>
        </h:commandLink>
</h:form>
.....page2.xhtml
<h:form id="myform">
            <h:commandLink value="Go to page 1" action="page1">
                <f:ajax render="@all" execute="@all"/>
            </h:commandLink>
</h:form>So always set an explicit id for each JSF tag.