JavaScript извлекает данные до того, как завершился вызов события Primefaces AJAX.

Question

.

. В компоненте штриховки TabView на tabChange. Я хочу сделать ajax-вызов для обновления данных bean-компонента в bean-компоненте, который затем должен обрабатываться javascript (некоторые диаграммы) ,

Проблема, которую я испытываю, заключается в том, что данные корректно обновляются с моим вызовом ajax, но javascript, который использует данные, извлекается до того, как он был обновлен с помощью ajax-вызова.

Это компонент firstface с ajax-вызовом события tabChange.

<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 для выполнения при возврате обратной передачи - это добавить javascript в RequestContext. В методе прослушивания действий onTabChange добавление следующего кода добавит скрипт к обратной передаче.

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

Еще одна проблема, которую вы можете столкнуться, однако, что если вы не указываете элементы в виде обновления из <p:ajax> компонента то <ui:repeat> теги, вероятно, не получите обновилась с новыми значениями для #{bean.dataList}. Вы можете указать, чтобы обновить элементы формы, используя атрибут update компонента ajax, или вы можете добавить его в RequestContext в своем исполнителе действий.

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

Answer 2

Если вы укажете функции JavaScript в атрибуте onTabChange из <p:tabView> компонента, он будет срабатывать до события, указанного в <p:ajax> компонента. В результате ваша функция JavaScript получит старые данные с сервера, прежде чем будет обновлена.

Компонент PrimeFaces <p:ajax> имеет один атрибут, который является oncomplete, и это именно то место, где вы должны установить JavaScript. Было бы так:

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

Ваша функция JavaScript теперь будет стрелять только когда ваш bean.onTabChange функция возвращает. Кроме того, не забудьте повторно отобразить любые части страницы, которые должны отображать новые данные с атрибутом update<p:ajax>.