I've got a problem were an ajax request is being posted with the wrong viewstate identifier after a page refresh (server side state saving of course). I'm hoping someone with more experience can take a look at this to see if I'm imagining things ;)

I can only reproduce this problem in Firefox (I'm using 3.0.1, I tried to reproduce in Safari, Opera, Chrome, IE). Here's my setup:

Firefox 3.0.1
Seam 2.1.1.GA
JBoss 5.0.0.GA
Richfaces 3.2.2.SR1

Here's the xhtml in question:

<h:form id="form3">
 <br />
 <a:commandLink
 value="Open"
 reRender="mp1"
 oncomplete="Richfaces.showModalPanel('mp1');" />
 <br />
</h:form>

<rich:modalPanel id="mp1">
 <f:facet name="controls">
 <a href="#" onclick="Richfaces.hideModalPanel('mp1')">Close</a>
 </f:facet>
 <h:form id="f1">
 <s:decorate template="/layout/edit.xhtml">
 <ui:define name="label">RequiredField</ui:define>
 <h:inputText required="true" />
 </s:decorate>
 <br/>
 <a:commandButton value="Submit" reRender="f1" />
 </h:form>
</rich:modalPanel>

So here's what's going on. A page with one link on it. Clicking the link posts an ajax request to the server which rerenders a modalpanel which is immediately displayed when the response returns. On this modalpanel is one required field. Submitting this form in the modalpanel posts another ajax request to the server which returns a validation error. So far so good.

Now for the problem. If I refresh (F5) the page and then click the link to show the modalpanel, the validation error from the previous submit is still displayed! Examining the a4j:log output I can see that the ajax post is submitting the previous page's javax.faces.ViewState identifier which explains the behavior, but has me worried! A picture is worth a thousand words: http://img31.imageshack.us/img31/2554/wrongviewstate.png

I managed to workaround this, simply by moving the open link after the modalpanel declaration:

<rich:modalPanel id="mp1">
 <f:facet name="controls">
 <a href="#" onclick="Richfaces.hideModalPanel('mp1')">Close</a>
 </f:facet>
 <h:form id="f1">
 <s:decorate template="/layout/edit.xhtml">
 <ui:define name="label">RequiredField</ui:define>
 <h:inputText required="true" />
 </s:decorate>
 <br/>
 <a:commandButton value="Submit" reRender="f1" />
 </h:form>
</rich:modalPanel>

<h:form id="form3">
 <br />
 <a:commandLink
 value="Open"
 reRender="mp1"
 oncomplete="Richfaces.showModalPanel('mp1');" />
 <br />
</h:form>

Can anyone shed some light on this please?

Cheers!