PrimeFaces - Dialog Lazy Content Loading Example

This example shows how to load dialog's content lazily. To achieve that, we need to use dynamic="true" attribute of the <p:dialog />. In this case the dialog fetches its content just before it is displayed rather than initial page load. This is a useful feature to speed up the page initial load time.

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>Primefaces Dialog Lazy Content Example</h2>
    <h:outputText value="Page loaded time: #{exampleBean.time}"/>
    <br/>
    <p:commandButton value="Show Dialog" onclick="PF('dlg').show();" type="button"/>

    <p:dialog header="Dialog Lazy Content" widgetVar="dlg" modal="true" dynamic="true">
        <h:outputText value="Dialog loaded time: #{exampleBean.time}"/>
    </p:dialog>

</h:body>

The manage bean

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

mvn tomcat7:run-war

Output

Note that, only first invocation of the dialog will load it's content, the subsequent invocations won't update the dialog content dynamically. For dynamic content update check out the next example.

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