Primefaces's dialog 'appendTo' property, what it useful for?

jsf-2 primefaces
Anatoly picture Anatoly · May 13, 2015 · Viewed 35.8k times · Source

Maybe it's a dumb question, but in Primefaces's <p:dialog> there's property which called appendTo which described in manual as:

Appends the dialog to the element defined by the given search expression.

I can't realize what it useful for?

Answer

Mathieu Castets picture Mathieu Castets · May 13, 2015

From the PrimeFaces User Guide (currently p. 185):

Do not place dialog inside tables, containers likes divs with relative positioning or with nonvisible overflow defined, in cases like these functionality might be broken. This is not a limitation but a result of DOM model. For example dialog inside a layout unit, tabview, accordion are a couple of examples. Same applies to confirmDialog as well.

You can overcome this by using appendTo="@(body)" and your dialog will be attached as a child of the <body> node.

One of the main dialog option is modal and you could quickly end up with your dialog behind the overlay if you are not using appendTo as shown below:

enter image description here

See also http://forum.primefaces.org/viewtopic.php?f=3&t=16504

Notes:

  • Before PrimeFaces 5.0, the attribute to set was appendToBody="true". This was changed for 5.0.
  • If your dialog contains some buttons don't forget to surround them by <h:form> (see Proper Construct for Primefaces Dialog)

Related questions

List of <p:ajax> events

I've searched the Internet and I cannot find a list of <p:ajax> events. Can anyone provide a complete list of events for the <p:ajax> tag? I'm particularly interested if there is an onblur event …

Read More
Primefaces valueChangeListener or <p:ajax listener not firing for p:selectOneMenu

I am using Primefaces 3.4.2. I have the following in my JSF page <p:selectOneMenu id="emp" value="#{mymb.emp.employeeName}" valueChangeListener="#{mymb.handleChange}" required="true" style="width: 150px;"> <f:selectItem noSelectionOption="true" itemLabel="Please Select"/> <…

Read More
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

The following code is inspired from PrimeFaces DataGrid + DataTable Tutorials and put into a <p:tab> of a <p:tabView> residing in a <p:layoutUnit> of a <p:layout>. Here is the …

Read More