页面加载后加载面板内容答案

【问题标题】：Load panel content after page load页面加载后加载面板内容
【发布时间】：2013-12-30 21:57:19
【问题描述】：

我有带面板的仪表板：

<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>

我在渲染页面之前加载了一个包含内容的列表dashboardOptionsMB.emsWidgets，这适用于面板组件：

panel.xhtml:

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

所以，在每次渲染之前，我都会用这个方法用所有元素和内容初始化列表：

DashboardOptionsMB：

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

我想要实现的是在页面加载后动态加载每个面板内容。例如每个面板应该调用：

initWidget(String widgetId)

页面加载后，以及该方法完成后更新其内容。

【问题讨论】：

标签： jsf jsf-2 primefaces

【解决方案1】：

使用p:remoteCommand 创建一些Ajaxified Javascript，在加载正文时执行：

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

或者，您可以使用autoRun="true" 参数让它在文档准备好时执行：

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

另请参阅：

【讨论】：