Primefaces 对话框的正确构造答案

【问题标题】：Proper Construct for Primefaces DialogPrimefaces 对话框的正确构造
【发布时间】：2012-05-21 16:41:21
【问题描述】：

我对 Primefaces 3 对话框的构造感到困惑。

我在 SO 中看到具有这种模式的问题。表单在对话框之外。

<h:form>
  <p:dialog id="dialog" modal="true" widgetVar="dlg">
  </p:dialog>
</h:form>

但其他问题有这个。

<p:dialog id="dialog" modal="true" widgetVar="dlg">
    <h:form>      
    </h:form>
</p:dialog>

如果有任何正当理由使用其中一个而不是另一个，我会感到困惑？

谢谢

【问题讨论】：

【解决方案1】：

你最好把<h:form>放在<p:dialog里面，像这样

<p:dialog id="dialog" modal="true" widgetVar="dlg">
    <h:form>      
    </h:form>
</p:dialog>

因为您的对话框内容可能会从您的页面中“取出”并附加到您的 DOM 树中的其他位置，因此如果您将对话框放置在某个表单中，它可能会导致您的对话框重新定位到其他位置并导致所有按钮/链接和其他元素停止工作（这是 SO 中非常常见的问题）

所以为了安全起见，请将 <h:form> 标签放在 <p:dialog 标签内

另一个例子是当你在对话框中使用appendToBody="true"：

如果对话框位于 h:form 组件内并且在浏览器上启用了 appendToBody 对话框将超出形式并可能导致意外结果。在这种情况下，在里面嵌套一个表单一个对话框。

【讨论】：