Modal panel closes on it's own

[lindagiordano]

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.

[nbelaevski]

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.

[lindagiordano]

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!