4 Replies Latest reply on Aug 4, 2009 8:07 AM by frer

Multiple ModalPanel

frer Jul 31, 2009 10:43 AM

Hi,

I'd like to have a page with multiple modalpanel. For example, I have afirst modalPanel for Person Info (name, email, password). I also have a list of addresses. If I click on one of the addresses, I would like to open another modalpanel to edit this address. When completed, I would go back to the Person form and save it from there.

I'm able to do this but when I open the Address ModalPanel, the Person ModalPanel dissappears. Therefore I cannot go back to it.

Is it possible to have multiple modalpanels opened at the same time. If so why is it that when I open the second, it closes the first?

Thank you,

Francois

1. Re: Multiple ModalPanel

nbelaevski Jul 31, 2009 11:32 AM (in response to frer)

Hi Francois,

This should work. Please provide details: RF and browser version.
Actions

2. Re: Multiple ModalPanel

frer Jul 31, 2009 12:09 PM (in response to frer)

Thanks for your reply. I am using RichFaces 3.3 with Firefox 3.5.

Here is a code example. A seller has a list of products (main page). I can then open a Product ModalPanel to edit the product. From this popup, I have a list of images. If I click on one of the images, it should open the Image popup in which I can upload an image.

When I click on the link to open the image, the product modalpanel closes. Therefore when I close the Image Modal Panel, I am brought back to my seller page (instead of the Product Modal Panel):

(I have cropped my files to remove most of the useless info and have copied the included files in it):

<!DOCTYPE html 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:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:c="http://java.sun.com/jstl/core">


 <rich:tabPanel switchType="ajax">
 <rich:tab label="#{messages['resources.form.tabs.general']}" immediate="true">
 <h:form>
 <table class="attributes">
 <tbody class="attributes-tbody">
 <tr class="attribute" id="seller-name">
 <td id="seller-name-label-container" class="label-container">
 <label class="label required" id="seller-name-label">
 <h:outputText value="#{messages['clothing.seller.Seller.attributes.name']}"/>
 </label>
 </td>
 <td id="seller-name-edition-container" class="edition-container">
 <h:inputText value="#{formAction.entity.name}" id="company-name-value" required="true">
 <rich:ajaxValidator event="onblur"/>
 <a4j:support event="onchange" ajaxSingle="true" reRender="company-name-value" limitToList="true"/>
 </h:inputText>
 <rich:message for="company-name-value" styleClass="message" infoClass="success" errorClass="error" warnClass="warning"/>
 </td>
 </tr>
 </tbody>
 </table>
 </h:form>
 </rich:tab>
 <rich:tab label="#{messages['clothing.seller.Seller.products.list']}" immediate="true" action="#{formAction.fetchProductsSearchResults}">
 <div id="products-general-messages" class="messages">
 <h:messages id="products-messages" styleClass="message" infoClass="success" errorClass="error" warnClass="warning"/>
 </div>
 <a4j:outputPanel ajaxRendered="true">
 <div id="products-list">
 <h:form>
 <div class="actions-container">
 <span class="actions-explanation">#{messages['resources.list.actions.container']} </span>
 <a4j:commandLink action="#{formAction.createProducts()}" oncomplete="Richfaces.showModalPanel('products-panel-modal',{width:550, top:200});" reRender="main-content">
 <h:graphicImage styleClass="controlpanel-new" url="/static/img/new.png" alt="#{messages['resources.list.add']}"/>
 <h:outputText value="#{messages['resources.list.add']}" />
 </a4j:commandLink>
 </div>
 <rich:dataTable id="products-resultsTable" value="#{formAction.entity.productsAsList}" var="_entity" styleClass="list" rows="10" reRender="datascroller">
 <h:column>
 <f:facet name="header">
 <h:outputText id="products-actions-text" value="#{messages['resources.list.actions']}" />
 </f:facet>
 <a4j:commandLink action="#{formAction.editProducts(_entity)}" oncomplete="Richfaces.showModalPanel('products-panel-modal',{width:550, top:200});" reRender="main-content">
 <h:graphicImage styleClass="controlpanel-new" url="/static/img/edit.png"/>
 </a4j:commandLink>
 <a4j:commandLink action="#{formAction.removeProducts(_entity)}" reRender="main-content">
 <h:graphicImage styleClass="controlpanel-delete" url="/static/img/delete.png" alt="#{messages['resources.list.delete']}" />
 </a4j:commandLink>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText id="nameText" value="#{messages['clothing.product.Product.attributes.name']}" />
 </f:facet>
 <h:outputText id="name" value="#{_entity.name}" />
 </h:column>
 <f:facet name="footer">
 <rich:datascroller id="datascroller" />
 </f:facet>
 </rich:dataTable>

 <div class="actions-container">
 <span class="actions-explanation">#{messages['resources.list.actions.container']} </span>
 <a4j:commandLink action="#{formAction.createProducts}" oncomplete="Richfaces.showModalPanel('products-panel-modal');">
 <h:graphicImage styleClass="controlpanel-new" url="/static/img/new.png" alt="#{messages['resources.list.add']}"/>
 <h:outputText value="#{messages['resources.list.add']}" />
 </a4j:commandLink>
 </div>
 </h:form>
 </div>
 </a4j:outputPanel>
 </rich:tab>
 </rich:tabPanel>
 <rich:modalPanel id="products-panel-modal" minWidth="700" minHeight="300" autosized="true" style="text-align:left;" rendered="#{formAction.currentProducts != null}">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="#{messages['clothing.product.Product.form.title']}" id="products-panel-header"></h:outputText>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <a href="javascript:void(0);" onclick="Richfaces.hideModalPanel('products-panel-modal');">
 <h:graphicImage url="/static/img/back.png" alt="#{messages['resources.form.cancel']}"/>
 <h:outputText value="#{messages['resources.form.cancel']}" />
 </a>
 </h:panelGroup>
 </f:facet>
 <ul id="products-control-panel" class="controlpanel">
 <li>
 <h:panelGroup>
 <h:form>
 <a4j:commandLink oncomplete="Richfaces.hideModalPanel('products-panel-modal');">
 <h:graphicImage url="/static/img/back.png" alt="#{messages['resources.form.cancel']}"/>
 <h:outputText value="#{messages['resources.form.cancel']}" />
 </a4j:commandLink>
 <a4j:commandLink action="#{formAction.updateProducts}" oncomplete="Richfaces.hideModalPanel('products-panel-modal');" reRender="products-list">
 <h:graphicImage url="/static/img/save-back.png" alt="#{messages['resources.form.saveClose']}"/>
 <h:outputText value="#{messages['resources.form.saveClose']}" />
 </a4j:commandLink>
 </h:form>
 </h:panelGroup>
 </li>
 </ul>
 <rich:tabPanel switchType="ajax">
 <rich:tab label="#{messages['resources.form.tabs.general']}" immediate="true">
 <h:form>
 <table class="attributes">
 <tbody class="attributes-tbody">
 <tr class="attribute" id="product-description">
 <td id="product-description-label-container" class="label-container">
 <label class="label " id="product-description-label">
 <h:outputText value="#{messages['clothing.product.Product.attributes.description']}"/>
 </label>
 </td>
 <td id="product-description-edition-container" class="edition-container">
 <h:inputTextarea value="#{formAction.entity.description}" id="product-description-value" required="false">
 <rich:ajaxValidator event="onblur"/>
 <a4j:support event="onchange" ajaxSingle="true" reRender="product-description-value" limitToList="true"/>
 </h:inputTextarea>
 <rich:message for="product-description-value" styleClass="message" infoClass="success" errorClass="error" warnClass="warning"/>
 </td>
 </tr>
 </tbody>
 </table>
 </h:form>
 </rich:tab>
 <rich:tab label="#{messages['clothing.product.Product.images.list']}" immediate="true" action="#{formAction.fetchImagesSearchResults}">
 <div id="images-general-messages" class="messages">
 <h:messages id="images-messages" styleClass="message" infoClass="success" errorClass="error" warnClass="warning"/>
 </div>
 <a4j:outputPanel ajaxRendered="true">
 <div id="images-list">
 <h:form>
 <div class="actions-container">
 <span class="actions-explanation">#{messages['resources.list.actions.container']} </span>
 <a4j:commandLink action="#{formAction.createImages()}" oncomplete="Richfaces.showModalPanel('images-panel-modal',{width:550, top:200});" reRender="main-content">
 <h:graphicImage styleClass="controlpanel-new" url="/static/img/new.png" alt="#{messages['resources.list.add']}"/>
 <h:outputText value="#{messages['resources.list.add']}" />
 </a4j:commandLink>
 </div>
 <rich:dataTable id="images-resultsTable" value="#{formAction.entity.imagesAsList}" var="_entity" styleClass="list" rows="10" reRender="datascroller">
 <h:column>
 <f:facet name="header" >
 <h:outputText id="selectionText" value="" />
 </f:facet>
 <h:selectBooleanCheckbox id="images-selectionCheckbox" value="#{_entity.selected}"/>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText id="images-actions-text" value="#{messages['resources.list.actions']}" />
 </f:facet>
 <a4j:commandLink action="#{formAction.editImages(_entity)}" oncomplete="Richfaces.showModalPanel('images-panel-modal',{width:550, top:200});" reRender="main-content">
 <h:graphicImage styleClass="controlpanel-new" url="/static/img/edit.png"/>
 </a4j:commandLink>
 <a4j:commandLink action="#{formAction.removeImages(_entity)}" reRender="main-content">
 <h:graphicImage styleClass="controlpanel-delete" url="/static/img/delete.png" alt="#{messages['resources.list.delete']}" />
 </a4j:commandLink>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText id="imageText" value="#{messages['clothing.product.ProductImage.attributes.image']}" />
 </f:facet>
 <s:graphicImage id="image" value="#{_entity.image.content}" style="width:48px"/>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText id="typeText" value="#{messages['clothing.product.ProductImage.type.instance']}" />
 </f:facet>
 <h:outputText id="type" value="#{_entity.type}" />
 </h:column>
 <f:facet name="footer">
 <rich:datascroller id="datascroller" />
 </f:facet>
 </rich:dataTable>

 <div class="actions-container">
 <span class="actions-explanation">#{messages['resources.list.actions.container']} </span>
 <a4j:commandLink action="#{formAction.createImages}" oncomplete="Richfaces.showModalPanel('images-panel-modal');">
 <h:graphicImage styleClass="controlpanel-new" url="/static/img/new.png" alt="#{messages['resources.list.add']}"/>
 <h:outputText value="#{messages['resources.list.add']}" />
 </a4j:commandLink>
 </div>
 </h:form>
 </div>
 </a4j:outputPanel>
 </rich:tab>
 </rich:tabPanel>
 <rich:modalPanel id="images-panel-modal" minWidth="700" minHeight="300" autosized="true" style="text-align:left;" rendered="#{formAction.currentImages != null}">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="#{messages['clothing.product.ProductImage.form.title']}" id="images-panel-header"></h:outputText>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <a href="javascript:void(0);" onclick="Richfaces.hideModalPanel('images-panel-modal');">
 <h:graphicImage url="/static/img/back.png" alt="#{messages['resources.form.cancel']}"/>
 <h:outputText value="#{messages['resources.form.cancel']}" />
 </a>
 </h:panelGroup>
 </f:facet>
 <ul id="images-control-panel" class="controlpanel">
 <li>
 <h:panelGroup>
 <h:form>
 <a4j:commandLink oncomplete="Richfaces.hideModalPanel('images-panel-modal');">
 <h:graphicImage url="/static/img/back.png" alt="#{messages['resources.form.cancel']}"/>
 <h:outputText value="#{messages['resources.form.cancel']}" />
 </a4j:commandLink>
 <a4j:commandLink action="#{formAction.updateImages}" oncomplete="Richfaces.hideModalPanel('images-panel-modal');" reRender="images-list">
 <h:graphicImage url="/static/img/save-back.png" alt="#{messages['resources.form.saveClose']}"/>
 <h:outputText value="#{messages['resources.form.saveClose']}" />
 </a4j:commandLink>
 </h:form>
 </h:panelGroup>
 </li>
 </ul>
 <a4j:include viewId="/view/product/productImage/form.xhtml">
 <ui:param name="formAction" value="#{product_productImage_actions_ProductImageWebFormAction}"/>
 </a4j:include>
 </rich:modalPanel>
 </rich:modalPanel>

</ui:composition>

3. Re: Multiple ModalPanel

nbelaevski Jul 31, 2009 1:29 PM (in response to frer)

I guess the problem happens because you are re-rendering the whole view (didn't find definition for "main-content" element). As modal panels are rendered hidden by default, the issue happens.
Actions
4. Re: Multiple ModalPanel

frer Aug 4, 2009 8:07 AM (in response to frer)

You're right. I actually simply removed the "reRender" tag and now it works flawlessly.

Thanks a lot for your help...we'd been banging our heads on this for a while!
Actions

Go to original post