PrimeFaces - Dialog Dynamic Content Example

In this example, we will see how to update dialog content dynamically. As compare to our last example, here we need to use the 'update' attribute of CommandButton and the oncomplete event instead of onclick because onclick is executed before ajax update.

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>Primefaces Dialog Dynamic Content Example</h2>
    <h:outputText value="Page loaded time: #{exampleBean.time}"/>
    <br/>
    <h:form>
        <p:commandButton value="Show Dialog"
                         oncomplete="PF('dlg').show();"
                         update="content"/>
        <p:dialog header="Dynamic Content Dialog" widgetVar="dlg" modal="true">
            <h:outputText id="content"
                          value="Dialog loaded time: #{exampleBean.time}"/>
        </p:dialog>
    </h:form>

</h:body>

The manage bean

@ManagedBean
public class ExampleBean {
  public String getTime() {
      return LocalTime.now().toString();
  }
}

mvn tomcat7:run-war

Output

In this case (as compared to the last example), the dialog's content will get updated on each invocation. Here, we can still use the attribute dynamic="true" of <p:dialog /> to speed up the page's initial load time.

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• JDK 1.8
• Maven 3.3.9