2 Replies Latest reply on Jun 15, 2009 12:06 PM by Giovanni Miano

    RichFaces ModalPanel with search form always closing

    Andrew May Newbie

      Hi, I'm writing my first Seam application (and my first JSF application), and I've hit a problem trying to use rich:modalPanel. (Seam 2.0.2SP1, RichFaces 3.2.2GA, Facelets 1.1.11).


      I have a page with a complex form, and then I am using the Modal panel as a lookup for some data on the original form. The modal panel is declared outside the main form with a separate form. Currently it just contains a search button and a rich:dataTable for displaying the results. When I click the a4j:commandButton to do the search the search is performed, but the panel immediately closes. I want the panel to remain so that a record can be selected.


      Here is partial code:
      Main page:


      <ui:composition template="template.xhtml">
          <ui:define name="content">
               <a4j:form>
                   <ui:include src="sections/travelRequest/heading.xhtml"/>
                   <ui:include src="sections/travelRequest/travel.xhtml"/>
                   <ui:include src="sections/travelRequest/costs.xhtml"/>
                   <ui:include src="sections/travelRequest/chartfields.xhtml"/>
                   <ui:include src="sections/travelRequest/attachments.xhtml"/>
                   <ui:include src="sections/travelRequest/workflow.xhtml"/>
                   <!-- Form Submission -->
                   <rich:panel>
                       <f:facet name="header">Travel Request Form Actions</f:facet>
                       <h:commandButton value="Save for later" action="#{travelRequestAction.save}" />
                   </rich:panel>
               </a4j:form>
               <!-- Popup panels -->
               <ui:include src="sections/travelRequest/employeeSearch.xhtml"/>
           </ui:define>
      </ui:composition>
      



      Popup (employeeSearch.xhtml):


      <ui:component>
        <rich:modalPanel id="employeeSearchPanel" keepVisualState="true" autosized="true">
          <f:facet name="header">
            <h:outputText value="Employee Search"></h:outputText>
          </f:facet>
          <f:facet name="controls">
            <h:panelGroup>
              <h:graphicImage value="/images/close.png" style="cursor:pointer" id="hidelink"/>
              <rich:componentControl for="employeeSearchPanel" attachTo="hidelink" operation="hide" event="onclick"/>
            </h:panelGroup>
          </f:facet>
          <a4j:form ajaxSubmit="true">
            <h:panelGrid columns="2">
              <h:outputLabel for="employeeName" value="Employee Name:"/>
              <h:inputText id="employeeName" value="#{employeeSearchName}"/>
      
              <a4j:commandButton action="#{employeeSearch.search}" value="search" reRender="employeeTable"/>
              <h:outputText value=""/>
      
              <rich:dataTable value="#{employeeResults}" var="employee" id="employeeTable">
                <rich:column>
                  <f:facet name="header"><h:outputText value="Employee ID"/></f:facet>
                  <h:outputText value="#{employee.emplid}"/>
                </rich:column>
                <rich:column>
                  <f:facet name="header"><h:outputText value="Employee Name"/></f:facet>
                  <h:outputText value="#{employee.name}"/>
                </rich:column>
              </rich:dataTable>
            </h:panelGrid>
          </a4j:form>
        </rich:modalPanel>
      </ui:component>
      



      The main page uses the TravelRequestAction class for interaction, and the Popup uses the EmployeeSearchAction class.


      Part of EmployeeSearchAction:


      @Name("employeeSearch")
      public class EmployeeSearchAction {
      
          @In(required=false)
          private String employeeSearchName;
      
          @DataModel
          private List<Employee> employeeResults;
      
          @Logger
          private Log logger;
      
          public void search() {
              logger.info("Searching for "+employeeSearchName);
              employeeResults = new ArrayList<Employee>();
              employeeResults.add(new Employee("12345", "Blogs, Joe"));
              employeeResults.add(new Employee("54321", "Flintstone, Fred"));
          }
      }
      



      Based upon what I have read in the forums here and on jboss.org I've tried a number of different things in the pop-up. I've tried using a h:form instead of a4j:form (and I think the ajaxSubmit true I've currently got is redundant?)


      Using Firebug to look at the request, I see an Ajax Response true header, and the POST body is this:


      AJAXREQUEST            _viewRoot
      autoScroll     
      j_id179                    j_id179
      j_id179:employeeName   foo
      j_id179:j_id182            j_id179:j_id182
      javax.faces.ViewState  j_id2
      



      If I bring the pop-up again, it's populated with my search string and the dataTable (the main page is conversational).


      I would appreciate any help you can provide as I'm completely stuck.


      Thanks,
      Andrew