5 Replies Latest reply on Aug 3, 2011 1:22 AM by Sandhya Radhakrishnan

    Problem in rendering a panel inside a modal panel

    Sandhya Radhakrishnan Newbie

      Hi All,

       

      Am tring to render a include component inside a modalPanel . But is it is not getting rendered. Pls help me on ths.

       

      Snippet:

       

      <c:if test="#{tabBean.tabName=='transactions'}">

                              <a4j:commandButton styleClass="bnpButtons" style="width:auto" id="upload" value="+ Upload New File"

                                      oncomplete="Richfaces.showModalPanel('fileUploadPanel',{width:600, top:60});">

                                      <a4j:support event="onclick" reRender="pg" actionListener="#{fileUploadBean.setManualFileUpload}" ></a4j:support>

                              </a4j:commandButton>

                          </c:if>

                             

                      <rich:modalPanel id="fileUploadPanel" height="600"

                                  style="overflow-y:auto !important ;overflow-x:auto !important;">

                                  <h:panelGrid columns="3">

                                      <h:outputText styleClass="screenHeader" value="File Upload"></h:outputText>

                                      <rich:spacer width="400px"></rich:spacer>

                                      <h:panelGrid columns="2">

                                          <a4j:commandLink value="Close" id="hidelink" styleClass="stglMarker"

                                              oncomplete="Richfaces.hideModalPanel('fileUploadPanel');">

                                              <a4j:support event="onclick" action="#{fileUploadBean.closeManualFileUpload}"></a4j:support>

                                          </a4j:commandLink>

                                          <h:graphicImage value="/images/ico-close.gif" style="border:none" />

                                      </h:panelGrid>

                                  </h:panelGrid>

                              <rich:spacer height="20px" />

                          <a4j:outputPanel id="op">

                              <h:outputText styleClass="screenHeader" value="insidepanel"></h:outputText>

                              <a4j:keepAlive beanName="fileUploadBean" ajaxOnly="true"/>

                              <h:panelGrid id="pg" columns="1" rendered="#{fileUploadBean.showManaulFileUpload}">

                                  <a4j:keepAlive beanName="fileUploadBean" ajaxOnly="true"/>

                                  <h:outputText styleClass="screenHeader" value="before include"></h:outputText>

                                      <ui:include id="include" src="/facelets/invoice/invoiceUpload.xhtml"/>

                              <h:outputText styleClass="screenHeader" value="after include"></h:outputText>

                          </h:panelGrid>

                          </a4j:outputPanel>

                          <rich:spacer height="20px" />

                      </rich:modalPanel>

        • 1. Re: Problem in rendering a panel inside a modal panel
          ashutosh deora Newbie

          please add invoiceUpload.xhtml(code snippet) here .

          • 2. Re: Problem in rendering a panel inside a modal panel
            Sandhya Radhakrishnan Newbie

            Hi Ashutosh,

             

            <ui:composition xmlns="http://www.w3.org/1999/xhtml"

             

                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:c="http://java.sun.com/jstl/core"

             

                xmlns:a4j="http://richfaces.org/a4j"

             

                xmlns:rich="http://richfaces.org/rich">

             

             

             

            <a4j:region renderRegionOnly="true">

             

            <h:form>

             

            <a4j:keepAlive beanName="fileUploadBean" ajaxOnly="true"/>

             

                <rich:panel header="#{msg['manualfileupload']}" id="uploadPanel" style="width:990px;">

             

                <br/>

             

                    <h:panelGrid columns="2" id="panel">

             

                            <h:outputLabel value="#{msg['file.common.senderorgid']}*"></h:outputLabel>

             

                            <a4j:outputPanel id="senderComboPanel">

             

                           

             

                            <rich:comboBox label="#{msg['file.common.senderorgid']}" id="senderOrgCombo"

             

                            value="#{fileUploadBean.fileUploadVO.senderOrgId}" >

             

                            <a4j:support event="onchange" action="#{fileUploadBean.clearData}"  ajaxSingle="true"

             

                                reRender="uploadpanela4j,errorMsg,filetable" limitToList="true"/>

             

                                <f:selectItem itemValue=""  itemLabel=""/>

             

                                <c:forEach var="organization" items="#{fileUploadBean.orgList}"

             

                                    varStatus="status">

             

                                    <f:selectItem itemValue="#{organization.value}"  itemLabel="#{organization.name}"/>

             

                                </c:forEach>               

             

                             </rich:comboBox>       

             

                             </a4j:outputPanel>

             

                            </h:panelGrid>

             

                           

             

                        <a4j:outputPanel id="errorMsg">

             

                        <h:outputLabel   value="#{fileUploadBean.errorMsg}" style="color:red"/>

             

                        </a4j:outputPanel>

             

                    <rich:spacer height="30px" />

             

             

             

                    <h:panelGrid columns="3" columnClasses="top,top,top" id="uploadGrid">

             

                        <a4j:outputPanel id="uploadpanela4j">       

             

                        <rich:fileUpload maxFilesQuantity="#{fileUploadBean.maxFileCount}"

             

                            fileUploadListener="#{fileUploadBean.onUpload}" id="upload"

             

                            immediateUpload="false" noDuplicate="true" allowFlash="false"

             

                            uploadControlLabel="#{msg['file.common.uploadfile']}"

             

                            stopControlLabel=""

             

                            stopEntryControlLabel=""

             

                            stopButtonClass="stopButton"

             

                            stopButtonClassDisabled="stopButton"

             

                            doneLabel="Success"

             

                            addControlLabel="#{msg['file.common.browse']}"

             

                            acceptedTypes="#{fileUploadBean.acceptedFileType}" ontyperejected="alert('Selected file is not supported for upload');" >

             

                            <a4j:support event="onclick" reRender="senderComboPanel"/>

             

                            <a4j:support event="onadd" process="senderOrgCombo"></a4j:support>

             

                            <a4j:support event="onuploadcomplete" reRender="errorMsg,filetable"/>

             

                        </rich:fileUpload>

             

                        </a4j:outputPanel>

             

                        <rich:spacer width="30px"></rich:spacer>

             

                       

             

                    </h:panelGrid>

             

                    <rich:spacer height="30px" />

             

                   

             

                    </rich:panel>

             

                </h:form>

             

                </a4j:region>

             

               

             

             

             

            </ui:composition>

            • 3. Re: Problem in rendering a panel inside a modal panel
              ashutosh deora Newbie

              can u try one thing.

              copy this

               

               

               

              <a4j:region renderRegionOnly="true">

               

              <h:form>

               

              <a4j:keepAlive beanName="fileUploadBean" ajaxOnly="true"/>

               

                  <rich:panel header="#{msg['manualfileupload']}" id="uploadPanel" style="width:990px;">

               

                  <br/>

               

                      <h:panelGrid columns="2" id="panel">

               

                              <h:outputLabel value="#{msg['file.common.senderorgid']}*"></h:outputLabel>

               

                              <a4j:outputPanel id="senderComboPanel">

               

                            

               

                              <rich:comboBox label="#{msg['file.common.senderorgid']}" id="senderOrgCombo"

               

                              value="#{fileUploadBean.fileUploadVO.senderOrgId}" >

               

                              <a4j:support event="onchange" action="#{fileUploadBean.clearData}"  ajaxSingle="true"

               

                                  reRender="uploadpanela4j,errorMsg,filetable" limitToList="true"/>

               

                                  <f:selectItem itemValue=""  itemLabel=""/>

               

                                  <c:forEach var="organization" items="#{fileUploadBean.orgList}"

               

                                      varStatus="status">

               

                                      <f:selectItem itemValue="#{organization.value}"  itemLabel="#{organization.name}"/>

               

                                  </c:forEach>              

               

                               </rich:comboBox>      

               

                               </a4j:outputPanel>

               

                              </h:panelGrid>

               

                            

               

                          <a4j:outputPanel id="errorMsg">

               

                          <h:outputLabel   value="#{fileUploadBean.errorMsg}" style="color:red"/>

               

                          </a4j:outputPanel>

               

                      <rich:spacer height="30px" />

               

               

               

                      <h:panelGrid columns="3" columnClasses="top,top,top" id="uploadGrid">

               

                          <a4j:outputPanel id="uploadpanela4j">      

               

                          <rich:fileUpload maxFilesQuantity="#{fileUploadBean.maxFileCount}"

               

                              fileUploadListener="#{fileUploadBean.onUpload}" id="upload"

               

                              immediateUpload="false" noDuplicate="true" allowFlash="false"

               

                              uploadControlLabel="#{msg['file.common.uploadfile']}"

               

                              stopControlLabel=""

               

                              stopEntryControlLabel=""

               

                              stopButtonClass="stopButton"

               

                              stopButtonClassDisabled="stopButton"

               

                              doneLabel="Success"

               

                              addControlLabel="#{msg['file.common.browse']}"

               

                              acceptedTypes="#{fileUploadBean.acceptedFileType}" ontyperejected="alert('Selected file is not supported for upload');" >

               

                              <a4j:support event="onclick" reRender="senderComboPanel"/>

               

                              <a4j:support event="onadd" process="senderOrgCombo"></a4j:support>

               

                              <a4j:support event="onuploadcomplete" reRender="errorMsg,filetable"/>

               

                          </rich:fileUpload>

               

                          </a4j:outputPanel>

               

                          <rich:spacer width="30px"></rich:spacer>

               

                        

               

                      </h:panelGrid>

               

                      <rich:spacer height="30px" />

               

                    

               

                      </rich:panel>

               

                  </h:form>

               

                  </a4j:region>

               

               

               

              in place of     <ui:include id="include" src="/facelets/invoice/invoiceUpload.xhtml"/>

               

              and try it .

              then please let me know what is the result.

              • 4. Re: Problem in rendering a panel inside a modal panel
                Sandhya Radhakrishnan Newbie

                I tried it earlier. but it is not working as well.

                • 5. Re: Problem in rendering a panel inside a modal panel
                  Sandhya Radhakrishnan Newbie

                  i solved the issue by placing the modal panel outside the form and adding a form inside it. Thanks you so much