Problem with ajax rendered form...
I've tried this using both a4j:include and simply using a div with the contents re-rendered by a a4j:support but both have the same results.
The issue is this I have a dropdown and based on the selection in the dropdown I want to display a form (a different form for each dropdown selecton). I can get the form to display using the following code:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.ajax4jsf.org/rich"
template="../layout/template.xhtml"
xmlns:a4j="http://richfaces.org/a4j">
<ui:define name="body">
<h:messages globalOnly="true" styleClass="message"/>
<rich:panel>
<f:facet name="header">Customer Interactions</f:facet>
<div class="dialog">
<h:form id="interactionForm">
<h1><h:outputText value="Add Customer Interaction"/></h1>
<h:selectOneMenu id="typeList" value="#{interactionFormNavigation.navigationSelection}">
<s:convertEnum />
<s:enumItem enumValue="SELECT_ONE" label="--Select--" />
<s:enumItem enumValue="PLACED_ORDER_INTERACTION" label="Placed Order"/>
<s:enumItem enumValue="PRODUCT_QUESTION_INTERACTION" label="Product Question"/>
<s:enumItem enumValue="ORDER_SERVICE_INTERACTION" label="Order Service"/>
<s:enumItem enumValue="INFORMATION_REQUEST_INTERACTION" label="Information Request"/>
<s:enumItem enumValue="TRANSFER_INTERACTION" label="Transfer"/>
<s:enumItem enumValue="MANAGER_REDIRECT_INTERACTION" label="Direct to Manager"/>
<s:enumItem enumValue="OTHER_INTERACTION" label="Other"/>
<a4j:support reRender="ajaxInclude" event="onchange" limitToList="true"></a4j:support>
</h:selectOneMenu>
<br/>
</h:form>
<s:div id="ajaxInclude">
<s:div id="placedOrderIncludeDiv" rendered="#{interactionFormNavigation.checkRendered(3) == true}" >
<ui:include src="placedOrderInteraction.xhtml"/>
</s:div>
</s:div>
</div>
</rich:panel>
</ui:define>
</ui:composition>
I've only included one of the includes for simplicity's sake, but it shows the idea.
Here is the form that's included:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.ajax4jsf.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:messages globalOnly="true" styleClass="message"/>
<rich:panel>
<h:form id="placedOrderInteractionForm">
<div class="dialog">
<h1><h:outputText value="Placed Order"/></h1>
<h:panelGrid columns="3" rowClasses="prop" columnClasses="name,formvalue,validation">
<h:outputLabel for="typeList">Reasons</h:outputLabel>
<h:selectManyCheckbox id="typeList" layout="pageDirection"
value="#{placedOrderInteractionSession.placedOrderInteractionType}" required="true">
<a4j:support event="onblur" reRender="interactionTypeList" bypassUpdates="true"/>
<s:selectItems value="#{placedOrderInteractionTypeList.resultList}" var="iType"
label="#{iType.name}" />
<s:convertEntity />
</h:selectManyCheckbox>
<s:decorate id="interactionTypeList" template="../layout/edit.xhtml" for="typeList"></s:decorate>
<h:outputLabel for="xcartOrderId">XCart Order Id</h:outputLabel>
<h:inputText id="xcartOrderId" value="#{placedOrderInteractionSession.xcartOrderId}" required="true"><a4j:support event="onblur" reRender="orderIdDecoration" bypassUpdates="true"/></h:inputText>
<s:decorate id="orderIdDecoration" template="../layout/edit.xhtml" for="xcartOrderId"></s:decorate>
<h:outputLabel for="customerName">Customer Name</h:outputLabel>
<h:inputText id="customerName" value="#{placedOrderInteractionSession.customerName}"><a4j:support event="onblur" reRender="customerNameDecoration" bypassUpdates="true"/></h:inputText>
<s:decorate id="customerNameDecoration" template="../layout/edit.xhtml" for="customerName"></s:decorate>
<h:outputLabel for="statusList">Status</h:outputLabel>
<h:selectOneMenu id="statusList"
value="#{placedOrderInteractionSession.status}" required="true">
<s:selectItems value="#{supportCaseStatusTypeList.resultList}" var="iType"
label="#{iType.name}" />
<s:convertEntity />
</h:selectOneMenu>
<s:decorate id="statusDecoration" template="../layout/edit.xhtml" for="statusList"></s:decorate>
<h:outputLabel for="notes">Notes</h:outputLabel>
<h:inputTextarea id="notes" value="#{placedOrderInteractionSession.notes}"><a4j:support event="onblur" reRender="nameDecoration" bypassUpdates="true"/></h:inputTextarea>
<s:decorate id="nameDecoration" template="../layout/edit.xhtml" for="notes"></s:decorate>
</h:panelGrid>
</div>
<div style="clear:both"/>
<div class="actionButtons">
<h:commandButton id="save"
value="Save"
action="#{placedOrderInteractionSession.saveInteraction}"/>
<s:button propagation="end"
id="done"
value="Cancel"
view="/home.xhtml"/>
</div>
</h:form>
</rich:panel>
</ui:composition>
The issue is, when I click the save button, the saveInteraction action is called, but the properties of the session bean are not populated. If I simply set the rendered property of the ui:include tag to true and don't update it with ajax, the session bean properties populate.
I've also tried this with the ajax:include tag and have the same issues.
Any help would be greatly appreciated, this is my last hurdle in the app I'm developing.
-Dennis
