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

Problem in rendering a panel inside a modal panel

sandhyaradhakrishnan Jul 28, 2011 8:37 AM

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>

<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

ashutoshd Aug 2, 2011 1:16 AM (in response to sandhyaradhakrishnan)

please add invoiceUpload.xhtml(code snippet) here .
Actions
2. Re: Problem in rendering a panel inside a modal panel

sandhyaradhakrishnan Aug 2, 2011 1:21 AM (in response to ashutoshd)

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>
Actions
3. Re: Problem in rendering a panel inside a modal panel

ashutoshd Aug 2, 2011 1:41 AM (in response to sandhyaradhakrishnan)

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.
Actions
4. Re: Problem in rendering a panel inside a modal panel

sandhyaradhakrishnan Aug 2, 2011 2:00 AM (in response to ashutoshd)

I tried it earlier. but it is not working as well.
Actions
5. Re: Problem in rendering a panel inside a modal panel

sandhyaradhakrishnan Aug 3, 2011 1:22 AM (in response to sandhyaradhakrishnan)

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

Go to original post