rich modal window submission

[Zack Marrapese]

I am working on a project in which I would like to pop up a window which will do some basic form submission. After this I would like to return to the previous view.

I chose the rich:modalPanel component for this. I have no trouble showing and hiding the window. However, when I try to call any actionListener from a command object within the modal panel, it does not reach the actionListener. Here is the relevant portion of my code:

TEMPLATE:

<h1>
<ui:insert name="pageHeader" />
</h1>
<a4j:form>
<ui:insert name="pageBody" />
</a4j:form>

<a4j:form>
<ui:insert name="modalPanel" />
</a4j:form>

modalPanel defined:

<ui:define name="modalPanel">
    <rich:modalPanel id="newPanel" autosized="true" >
        <f:facet name="header">
            <h:panelGroup style="height:24px;">
                <h:outputText value="New Brand Type"></h:outputText>
            </h:panelGroup>
        </f:facet>
        <f:facet name="controls">
                <rich:componentControl for="newPanel" attachTo="hideWindow" operation="hide" event="onclick"/>
        </f:facet>
        <h:panelGrid columns="2">
        <h:outputLabel for="brandName">Brand Name: </h:outputLabel>
        <h:inputText id="brandName" value="#{globalBrandTypesBB.editBrandName}" styleClass="rich-input-text" />
        <h:outputLabel for="brandDesc">Description: </h:outputLabel>
        <h:inputTextarea id="brandDesc" value="#{globalBrandTypesBB.editBrandDesc}" styleClass="rich-textarea" cols="40" rows="10" />
        <h:outputLabel for="brandCategory">Category: </h:outputLabel>
        <h:selectOneMenu id="brandCategory" styleClass="rich-select" value="#{globalBrandTypesBB.editCategoryID}">
        <f:selectItems value="#{globalBrandTypesBB.brandCategoriesList}" />
        </h:selectOneMenu>
        </h:panelGrid>
        <h:inputHidden value="#{globalBrandTypesBB.editBrandTypeID}" />
        <a4j:commandButton styleClass="rich-button"  actionListener="#{globalBrandTypesBB.saveBrandType}" value="Save" reRender="globalBrandTypesTable" id="saveButton"/>
        <a4j:commandButton styleClass="rich-button" value="Cancel" id="hideWindow"/>
    </rich:modalPanel>
</ui:define>    

Backing bean:

 public void saveBrandType(ActionEvent event)
{
try
{
 
if (this.editCategoryID == 0 || this.editBrandName.equals(""))
{
this.createMessage("Select a category and name in order to create or update a brand type.", FacesMessage.SEVERITY_WARN);
}
else
{
EjbManagerBB ejbManager = (EjbManagerBB)this.getSessionScope().get("ejbManagerBB");
BrandType bt;
if (this.editBrandTypeID == 0)
{
bt = new BrandType();
bt.setBrandCategoryID(this.getEditCategoryID());
bt.setDescription(this.getEditBrandDesc());
bt.setName(this.getEditBrandName());
ejbManager.getTitleBrandProcess().createBrandType(bt);
}
else
{

bt = ejbManager.getTitleBrandProcess().findBrandType(this.editBrandTypeID);
bt.setBrandCategoryID(this.getEditCategoryID());
bt.setDescription(this.getEditBrandDesc());
bt.setName(this.getEditBrandName());
ejbManager.getTitleBrandProcess().updateBrandType(bt);
}
this.createMessage("Brand type was successfully saved.");
}
}
catch (Exception e)
{
this.createMessage("There was an error saving this brand type. Please try again later.", FacesMessage.SEVERITY_ERROR);
}
}   

However, the actionListener is never even reached (confirmed in debug). Any suggestions?

[Zack Marrapese]

I found out my problem. According to the manual, there are some limitations on submitting from a modal pane:
1.) A form must be declared within the modal panel (and therefore, the modal panel must be defined outside any existing form to avoid nested forms).
2.) The modal panel can't be included onto the page. It must be in the base of the page.

Hope this helps others that have this problem.
~Zack

[Venkat Sadasivam]

To keep in more simpler you can even think of having an iframe inside you modal dialog.