Proper Construct for Primefaces Dialog

Question

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

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>

But other question has this.

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

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?

Thanks

Answer 1

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>

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)

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

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

if dialog is inside an h:form component and appendToBody is enabled, on the browser dialog would be outside of form and may cause unexpected results. In this case, nest a form inside a dialog.