-
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. -
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.
-
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!