primefaces - Primefaces 对话框的正确构造

Question

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

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

谢谢

score 15 · Accepted Answer

你总是最好用这样的<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，则浏览器上的对话框将位于表单之外，并可能导致意外结果。在这种情况下，在对话框中嵌套一个表单。

1 回答 1