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

    Multiple ModalPanel

    Francois Eric Novice

      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
          Nick Belaevski Master

          Hi Francois,

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

          • 2. Re: Multiple ModalPanel
            Francois Eric Novice

            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
              Nick Belaevski Master

              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.

              • 4. Re: Multiple ModalPanel
                Francois Eric Novice

                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!