Primefaces 对话框的正确构造

问题描述

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

I am getting confused on the constrcut of a Primefaces 3 dialog.

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

I see question in SO that has this pattern. The form is outside the dialog.

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

Primefaces 展示 http://www.primefaces.org/showcase/ui/dialogLogin.jsf 倾向于后者.

The Primefaces showcase http://www.primefaces.org/showcase/ui/dialogLogin.jsf favors the latter one.

我很困惑是否有任何正当理由使用一个而不是另一个?

I am getting confused if there's any valid reason for using the one over the other?

谢谢

推荐答案

你总是最好把 放在 里面这个

You always better use place the <h:form> inside <p:dialog like this

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

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

cause you dialog content might be "taken" out from your page and appended some where else in your DOM tree , so if you place the dialog inside some form, it can cause your dialog to be relocated somewhere else and to cause all your buttons/links and other elements to stop working (this is a very common question here in SO)

因此，为了安全起见，您将 <h:form> 标签放在 <p:dialog 标签中

So in order to be allays on the safe side place you <h:form> tag inside your <p:dialog tag

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

Another example is when you use appendToBody="true" in dialog :

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

这篇关于Primefaces 对话框的正确构造的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！