Правильная конструкция для диалога Primefaces

Я запутался в сжатии диалога 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>

Витрина Primefaces http://www.primefaces.org/showcase/ui/dialogLogin.jsf одобряет последнюю.

Я запутался, если есть какая-либо веская причина для использования одного над другим?

Спасибо

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 включено, диалоговое окно браузера будет находиться за пределами формы и может привести к неожиданным результатам. В этом случае вложите форму в диалог.

Другие вопросы по тегам