PrimeFaces 对话框在 Chrome 浏览器中不起作用答案

【问题标题】：PrimeFaces dialog not working in Chrome browserPrimeFaces 对话框在 Chrome 浏览器中不起作用
【发布时间】：2012-12-12 12:33:06
【问题描述】：

如您所见，我试图在单击命令链接时显示一个对话框，该对话框在 IE 和 Firefox 中显示，但在 Google Chrome v23 中不显示，请建议。

<h:form id="myForm">
    <p:tabView id="tabView">
        <p:tab id="tab1" title="Tab 1">
            <h:panelGrid columns="1" cellpadding="10">
                <h:dataTable value="#{testBean.dataList}" var="data">
                    <h:column>
                        <h:outputText value="#{data}" />
                    </h:column>
                    <h:column>
                        <p:commandLink action="#{testBean.loadCommentHistory(data)}"
                                       update=":myForm:tabView:dialog" oncomplete="dlg.show()">
                            <h:graphicImage url="resources/theme1/images/comments.gif"
                                            styleClass="basicImageStyle" />
                        </p:commandLink>
                    </h:column>
                </h:dataTable>
                <p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
                    <h:outputText value="#{testBean.commentHistory}" />
                </p:dialog>
            </h:panelGrid>
        </p:tab>
    </p:tabView>
</h:form>

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

当您更新对话框时，对话框将重置为隐藏的默认状态。如果您调用dialog.show() 并更新对话框，对话框将再次隐藏。 Chrome（可能比 IE 或 FireFox 更快）似乎以不同的方式处理这个问题。一种解决方案是将对话框的内容包装在容器中并更新容器。

<p:commandLink action="#{testBean.loadCommentHistory(data)}"
    update=":myForm:tabView:dialog-content" oncomplete="dlg.show()">
    <h:graphicImage url="resources/theme1/images/comments.gif"
        styleClass="basicImageStyle" />
</p:commandLink>

<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
    <p:outputPanel id="dialog-content">
        <h:outputText value="#{testBean.commentHistory}" />
    </p:outputPanel>
</p:dialog>

【讨论】：

【解决方案2】：

如果您还没有，请尝试将页面封装在 f:view 标记中。 Chrome 和 Safari 不存在时会出现一些问题。见http://primefaces.org/faq.html问题3

<html xmnls=... >
    <f:view contentType="text/html">
        <h:head>
            ....
        </h:head>
        <h:body>
            ....
        </h:body>
    </f:view>
</html>

【讨论】：