1 Reply Latest reply on Dec 4, 2007 3:57 PM by Jing Fu

    Problem with ajax rendered form...

    Dennis John Newbie

      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