2 Replies Latest reply on Mar 3, 2009 1:19 PM by Linda Giordano

    Modal panel closes on it's own

    Linda Giordano Newbie

      I just upgraded to rich faces 3.3.0 in hopes of solving this problem, but it's still there. I have a modal panel that contains a datascroller to scroll a datagrid, and a rich:fileUpload command. Both of which will close the modal panel.

      The first part of my problem is the datascroller. I have a datagrid of images. I only want 5 columns and 1 row to appear. The datascroller contains 2 pages. When I click page 2, the modalpanel disappears.

      The second part of my problem is the fileupload. When I click the "Upload" button, the modalpanel disappears. I know it has something to do with the way these two controls refresh the region, but I can't seem to find a workaround to it.

      Here's my code:

      AdminImages.xhtml

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j">
      
      <h:form>
       <s:div>
       <p>
       <h:outputText value="You can change from the standard default images to any image you choose to upload. Upload all of your images here."/>
       </p>
       </s:div>
      
       <s:div id="imageArea">
       <rich:dataTable id="imageTable" value="#{imageAction.levelImages}" var="img">
       <rich:column>
       <h:graphicImage id="levelImage" url="image?g=#{img.id}&ix=#{currentUser.userId}&nx=#{currentUser.instance}"/>
       </rich:column>
      
       <rich:column>
       <a4j:commandLink action="#{imageAction.getAllImageList}"
       value="Level #{img.level}"
       oncomplete="Richfaces.showModalPanel('imageModalPanel')">
       </a4j:commandLink>
      
       </rich:column>
      
       <rich:column>
       <a4j:commandLink action="#{imageAction.resetImage(img)}">
       <h:outputText value="Reset"/>
       </a4j:commandLink>
       </rich:column>
      
       <rich:column>
       <a4j:commandLink rendered="#{img.level == imageAction.levelCount}" action="#{imageAction.deleteLevel(img)}">
       <h:graphicImage border="0" url="/img/delete.gif"/>
       </a4j:commandLink>
       </rich:column>
       <f:facet name="footer">
       <a4j:commandLink value="Add New Level..." action="#{imageAction.addLevel}"/>
       </f:facet>
       </rich:dataTable>
       </s:div>
      
      
      </h:form>
      
      
      <ui:include src="/AdminImageModalPanel.xhtml"/>
      
      
      </ui:composition>
      


      AdminImageModalPanel.xhtml
      
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j">
      
      
       <style>
       HR {
       height:2px;
       width:95%;
       background:#446791;
       align:center;
       margin: 0px 20px 0px 20px;
       }
       </style>
      
       <rich:modalPanel height="500" width="720" id="imageModalPanel" visible="true" rendered="true">
      
       <f:facet name="header">
       <h:outputText value="Image Management"/>
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelink"/>
       <rich:componentControl for="imageModalPanel" attachTo="hidelink" operation="hide" event="onclick"/>
       </h:panelGroup>
       </f:facet>
       <h:form>
       <p class="paragraph">
       Select an image from the database to use for this level. To upload additional images,
       use the upload section at the bottom half of this screen.
       </p>
      
       <rich:spacer height="10px"/>
       <s:div styleClass="subhead">
       Database Images
       </s:div>
       <rich:spacer height="10px"/>
       <s:div>
       <rich:dataGrid columns="5"
       elements="5"
       id="dbImageGrid"
       value="#{imageAction.allImages}" var="image">
      
       <rich:panel>
       <h:graphicImage id="dbImage1" url="image?g=#{image.id}&ix=#{currentUser.userId}&nx=#{currentUser.instance}"/>
       </rich:panel>
      
       <f:facet name="footer">
       <rich:datascroller for="dbImageGrid"></rich:datascroller>
       </f:facet>
       </rich:dataGrid>
       </s:div>
       <rich:spacer height="20px"/>
       <s:div>
       <hr/>
       </s:div>
       <rich:spacer height="10px"/>
       <p class="paragraph">
       Select files from your file system to upload to the database.
       </p>
      
       <rich:spacer height="10px"/>
       <s:div styleClass="subhead">
       Files to Upload
       </s:div>
       <rich:spacer height="10px"/>
       <s:div>
       <rich:fileUpload uploadData="#{imageAction.uploadFiles}"
       id="fileUpload"
       acceptedTypes="jpg, jpeg, gif, png"
       listHeight="100px"
       listWidth="600px"
       addControlLabel="Add file..."
       clearAllControlLabel="Clear all"
       clearControlLabel="Clear"
       stopEntryControlLabel="Stop process"
       uploadControlLabel="Upload to Database">
       <f:facet name="label">
       <h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}"/>
       </f:facet>
       <a4j:support event="onuploadcomplete" reRender="imageArea"/>
       </rich:fileUpload>
      
       </s:div>
       <rich:spacer height="10px"/>
       <s:div style="text-align:right" styleClass="actionButtons">
       <a4j:commandButton value="Change"
       action="#{imageAction.saveSelectedImage}"
       reRender="msgImg"
       onclick="Richfaces.showModalPanel('imageModalPanel')">
      
       </a4j:commandButton>
       <a4j:commandButton value="Close"
       reRender="msgImg"
       onclick="Richfaces.hideModalPanel('imageModalPanel')">
      
       </a4j:commandButton>
       </s:div>
       </h:form>
       </rich:modalPanel>
       </ui:composition>
      
      
      Thanks for your time.
      


        • 1. Re: Modal panel closes on it's own
          Nick Belaevski Master

          Hello,

          Modal panel is closed in the following cases:

          1. Closed explicitly (by JS API, rich:componentControl)
          2. Common HTTP request reloading the whole page happens.
          3. Container in which modal panel is located is updated by AJAX request.

          I suspect the 3rd reason because you do not use any components producing common HTTP requests (like h:commandLink) and do not close it explicitly. Probably, you've put the whole AdminImages.xhtml page into something that's re-rendered on each AJAX request, like a4j:outputPanel with ajaxRendered="true". Check that please.

          • 2. Re: Modal panel closes on it's own
            Linda Giordano Newbie

            That works! I had read about the ajaxrendered="true" in a previous post and could have sworn that I was not using it in my application. Well, I found it a few levels higher than the definition of the modalpanel. Once I removed it, everything worked.

            Thank YOU!