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

    RichFaces ModalPanel with search form always closing

    amayingenta
    amayingenta Nov 21, 2008 2:45 PM

      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