JavaScript 在 Primefaces AJAX 事件调用完成之前检索数据

Question

在 TabView primefaces 组件中，在 tabChange 上，我想做一个 ajax 调用来更新 bean 中的 bean 数据，然后需要由 javascript 处理（一些图表）。

我遇到的问题是数据通过我的 ajax 调用正确更新，但使用数据的 javascript 在 ajax 调用更新之前被检索。

这是在 tabChange 事件上带有 ajax 调用的 primeface 组件。

<p:tabView>
        <p:ajax event="tabChange" listener="#{bean.onTabChange}" />
        <p:tab title="Tab 1" id="tab1">
                //chart1
        </p:tab>  

        <p:tab title="Tab 2" id="tab2">
               //chart2    
        </p:tab>  

        <p:tab title="Tab 3" id="tab3">
              //chart3
        </p:tab>  
</p:tabView> 

这是 JavaScript：

function renderTheChart(tabIndex) { 
    var categories= [];
    var categories= [];

    <ui:repeat var="data" value="#{bean.dataList}">
        categories[categories.length] = "#{data.id}";
        values[values.length] = #{data.value};
    </ui:repeat>


    renderChart(values, categories, tabIndex);          
}

要知道何时调用 javascript 来更新组件，我尝试了客户端回调。

<p:tabView onTabChange="handleTabChange(event, index)">

JavaScript：

function handleTabChange(event, index) {
     renderTheChart(index);
}

Answer 1

如果您在<p:tabView> 组件的属性onTabChange 中指定您的JavaScript 函数，它将在您在<p:ajax> 组件中指定的事件之前触发。因此，您的 JavaScript 函数将在更新之前从服务器接收旧数据。

PrimeFaces 的<p:ajax> 组件有一个属性oncomplete，这正是您应该设置JavaScript 函数的地方。应该是这样的：

<p:ajax event="tabChange" listener="#{bean.onTabChange}" 
        oncomplete="handleTabChange(event, index);" update="someIDs"/>

您的 JavaScript 函数现在只会在您的 bean.onTabChange 函数返回时触发。此外，不要忘记使用<p:ajax> 的update 属性重新渲染页面中应该显示新数据的任何部分。

Answer 2

发生的情况是onTabChange Javascript 在服务器回发发生之前执行。这是正常行为，虽然许多 Primefaces 组件都有 oncomplete 属性，但 TabView 没有这样的属性。

您可以告诉 Javascript 在回发返回时执行的一种方法是在 RequestContext 上添加一个 javascript。在动作侦听器方法onTabChange 中添加以下代码会将脚本添加到回发中。

RequestContext context = RequestContext.getCurrentInstance();
context.execute("renderTheChart(" + tabIndex + ");");

您可能会遇到的另一个问题是，如果您没有在表单中指定要从<p:ajax> 组件更新的元素，那么<ui:repeat> 标记可能不会被#{bean.dataList} 的新值刷新。您可以使用 ajax 组件的 update 属性指定更新表单元素，也可以将其添加到操作侦听器中的 RequestContext 中。

//update panel   
context.addPartialUpdateTarget("form:panel");