CODEWITHSUNDEEP
jsfprimefaces
S Jagdeesh
S Jagdeesh

Reputation: 1553

<p:dialog> - Dialog box not getting closed when it should

I am using JSF (Mojara) and Primefaces 3.4 in a sample application. I am applying a layout on a screen where on a header (north) there is one Image link (on click a dialog box gets opened).

northheader.xhtml:

<h:body>    
        <h:form id="headerForm">    

        <p:panelGrid id="headerFormPanelGridID" style="align:left;border:0px>
                <p:row> 

            <p:column width="70">
    <p:commandLink onclick="dialogWidgetWar.show();"  title="SampleImg">
    <p:graphicImage value="../sampleimg.jpg" />
    </p:commandLink>
            </p:column> 


            </p:row> 


        </p:panelGrid>




    <p:dialog id="idInfo"  modal="true" widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400"  height="100" resizable="true" >          
        <h:panelGrid id="sampleId" style="cellpadding" border="0" cellpadding="0" cellspacing="0" width="200">


        </h:panelGrid>          
    </p:dialog>

        </h:form>       
</h:body>

For layout

<html lang="en"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:p="http://primefaces.org/ui">
   <h:head>

    </h:head> 
    <h:body>    

        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false">
                     <ui:include src="../northheader.xhtml" /> 

            </p:layoutUnit>

            <p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">

                    <ui:include src="../left.xhtml" />

             </p:layoutUnit>

            <p:layoutUnit position="center" size="200">

                <ui:insert name="pageContent"></ui:insert>
            </p:layoutUnit>

        </p:layout>

    </h:body>

</html>

Layout is being displayed properly, but when I Click on "SampleImg" link in northheader.xhtml, its getting opened but closing the dialog is not working, even if I add one close button inside the dialog box and onclick="dialogWidgetWar.hide()" is not working. I am not even able to select anything.

Can anybody help me out here, where is the problem?

Upvotes: 0

Views: 3371

Answers (3)

newuserua
newuserua

Reputation: 299

Try this, this should be work ; 

 <p:commandLink onclick="PrimeFaces.monitorDownload(hideStatus);"  title="SampleImg">

java script ;

    <script type="text/javascript">
            function showStatus() {
                dialogWidgetWar.show();
            }

            function hideStatus() {
                dialogWidgetWar.hide();
            }
        </script>

Upvotes: 1

siebz0r
siebz0r

Reputation: 20329

You're using a p:dialog inside a p:layout. This always led to problems in my past experiences. A solid solution is to place the p:dialog outside of the p:layout. Since you're using ui:define and ui:insert this doesn't seem straight forward, however it's quite simple. Since you can define multiple ui:define elements in one JSF page you can define a "content" and a "dialogs" ui:insert and ui:define.

<p:layout>
    <p:layoutUnit ...
        <ui:insert name="content"/>
    </p:layoutUnit>
</p:layout>
<ui:insert name="dialogs"/>

Upvotes: 1

RakeshSharma
RakeshSharma

Reputation: 191

Add appendToBody="true" attribute inside p:dialog

<p:dialog id="idInfo"  modal="true" appendToBody="true" 
widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400"  height="100" resizable="true" >

Upvotes: 2

Related Questions