<p:dialog> - 对话框在应该关闭时没有关闭答案

【问题标题】：<p:dialog> - Dialog box not getting closed when it should<p:dialog> - 对话框在应该关闭时没有关闭
【发布时间】：2012-09-16 19:43:02
【问题描述】：

我在示例应用程序中使用 JSF (Mojara) 和 Primefaces 3.4。我正在屏幕上应用布局，其中标题（北）有一个图像链接（单击时打开一个对话框）。

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>

用于布局

<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>

布局正在正确显示，但是当我单击 northheader.xhtml 中的“SampleImg”链接时，它会打开但关闭对话框不起作用，即使我在对话框内添加一个关闭按钮，onclick="dialogWidgetWar.hide()" 不起作用。我什至无法选择任何东西。

谁能帮帮我，问题出在哪里？

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

在 p:dialog

中添加 appendToBody="true" 属性

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

【讨论】：

【解决方案2】：

您在p:layout 中使用p:dialog。这总是导致了我过去经历中的问题。一个可靠的解决方案是将p:dialog 放在p:layout 之外。由于您使用的是ui:define 和ui:insert，这看起来并不简单，但它非常简单。由于您可以在一个 JSF 页面中定义多个 ui:define 元素，因此您可以定义一个“内容”和一个“对话”ui:insert 和 ui:define。

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

【讨论】：

【解决方案3】：

试试这个，应该可以的；

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

java脚本;

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

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

【讨论】：