Question

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

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

这是在tabChange事件中使用ajax调用的primeface-component。

<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

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

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

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

您可能遇到的另一个问题是，如果您未在表单中指定要从<p:ajax>组件进行更新的元素，则<ui:repeat>标记可能无法使用{的新值进行刷新{1}}。您可以指定使用ajax组件的#{bean.dataList}属性更新表单元素，也可以将其添加到动作侦听器中的RequestContext。

update

Answer 2

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

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

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

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

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

2 个答案: