Ajax woes with facelets and myfaces

[Andrew Robinson <an...@gmail.com>]

Okay, I am trying to create a wizard in an AjaxAnywhere zone. I just
posted a question to the myfaces list about this, but did not reply,
as this is a different approach and I am having different problems.

Setup (this is just shorthand):
<non-ajax form>...</form>
<ajax form><aaZone><ui:decorate
template="#{getfrombackingbean}"/></aaZone></form>
AA JS stuff...

Okay, this is plain Myfaces 1.1.1 code with Facelets 1.0.10. I am
using server side state keeping.

The aaZone dynamically includes a template (I also tried <ui:include
src="..."/> with the same outcome) based on the state of my backing
bean. This state determines what div to show in my Ajax zone.

Flow:
Initial page: show a button to start
2nd page: input text, next and cancel controls (all tomahawk)
3rd page: display value from input text and save and cancel buttons
4th page is the initial page (back to start)

Navigation for each action button just specifies the ViewID of the
current page (always post back to myself).

The first form includes non-ajax controls. It is working right now,
the state is not corrupted.

I am fine on the initial page
I am fine on the 2nd page
The 3rd page shows the input text from page two instead of the "Save"
button and shows the "Next" button instead of the "Cancel" button.

The buttons have their own IDs specified. Somewhere the controls from
the previous rendering/view are getting drawn instead of the controls
from the current page.

here is some of the XHTML:
Parent page AA code:
    <h:form id="ajaxForm">
      <div style="border: 1px solid blue;">
        <aa:zoneJSF id="ajaxZone">
          <!--div style="border: 1px solid red;">
            <ui:include src="/pages/ContentMgmt/#{testBean.wizardViewId}" />
          </div-->
          <div style="border: 1px solid red;">
            <ui:decorate
template="/pages/ContentMgmt/#{testBean.wizardViewId}" />
          </div>
          The current state is: #{testBean.state}<br/>
          The above div comes from : #{testBean.wizardViewId}<br/>
        </aa:zoneJSF>
      </div>
    </h:form>

Initial page AA content:
    <ui:composition>
      This is an ajax zone
      Counter: #{testBean.counter}
      <t:commandButton id="ajaxButtonSave" value="Add a new Web page"
        action="#{testBean.putDocument}"
actionListener="#{ajaxState.handlePostBack}" />
    </ui:composition>

2nd page AA content:
    <ui:composition>
      #{otest:log('This is the content')}
      Pass something:
      <t:inputText value="#{testBean.testValue}" id="testValue"
required="true" />
      <br/>
      This is the first page of my wizard<br/>
      <t:commandButton id="ajaxNext" value="Next" action="#{testBean.next}"
        actionListener="#{ajaxState.handlePostBack}" />
      <t:commandButton id="ajaxCancelAction" value="Cancel"
action="#{testBean.cancel}"
        actionListener="#{ajaxState.handlePostBack}" />
    </ui:composition>

3rd page AA content (this is the one that is corrupted):
    <ui:composition>
      #{otest:log('This is the content of page 2')}<br/>
      The value that was passed from page 1 is: #{testBean.testValue}<br/>
      This is the second page of my wizard<br/>
      <t:commandButton id="ajaxSave" value="Save" action="#{testBean.finish}"
        actionListener="#{ajaxState.handlePostBack}" />
      <t:commandButton id="ajaxCancel" value="Cancel"
action="#{testBean.cancel}"
        actionListener="#{ajaxState.handlePostBack}" />
    </ui:composition>

The ajaxState bean is request scoped and is just so I can check if the
postback is an Ajax postback or a normal postback

The testBean is a session scoped bean with all my action methods and a
"state" variable to remember the current wizard location.

All the HTML looks great, it is only the JSF components/controls that
are incorrect.

Ideas?

Thanks,
Andrew