Search code examples
jsfjsf-2primefaces

Load panel content after page load

I have dashboard with panels:

<p:dashboard id="board" model="#{dashboardOptionsMB.model}">            
   <c:forEach var="item" items="#{dashboardOptionsMB.emsWidgets}">
    <ui:include src="/pages/dashboard/panel.xhtml">
        <ui:param name="widget" value="#{item.webDashboardDbBean}" />
        <ui:param name="emsValue" value="#{item.emsValue}" />
    </ui:include>
   </c:forEach>
</p:dashboard>

I load a list dashboardOptionsMB.emsWidgets with content before rendering page, and this works fine with panel component:

panel.xhtml:

    <p:panel id="#{widget.widgetid}" header="#{widget.widgetheader}" closable="true" >
       <h:outputText value="#{emsValue.value}" />
       ...
    </panel>

So, before each rendering I initialize the list with all elements and content with this method:

DashboardOptionsMB:

    private void initWidgets(WebDashboardsDbBean dashboard) {
      //dashboard is JPA entity from database
      emsWidgets = dashboard.getWidgets();
      ...
    }

What I want to achieve is to load each panel content dynamically after page load. For example each panel should call:

initWidget(String widgetId)

after page load, and when this method is completed to update its content.

Solution

  • Use p:remoteCommand to create some Ajaxified Javascript which will be executed when body is loaded:

    <h:body onload="loadWidgets()">
    <!-- content --> 
    <p:remoteCommand name="loadWidgets" 
        update="#{widget.widgetid}" 
        actionListener="#{dashboardOptionsMB.initWidgets}"/>  
</h:body>

    Alternatively, you might use the autoRun="true" argument to have it executed when document is ready:

    <p:remoteCommand name="loadWidgets" 
    update="#{widget.widgetid}" 
    actionListener="#{dashboardOptionsMB.initWidgets}"
    autoRun="true"/>

    See also: