RichFaces ModalPanel with search form always closing
amayingenta Nov 21, 2008 2:45 PMHi, 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