Problem with ajax rendered form...
dennisrjohn Dec 1, 2007 1:42 PMI'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