JavaScript извлекает данные до завершения вызова события Primefaces AJAX - PullRequest
Новая
       0

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

1 голос
/ 04 января 2012

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

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

Это простой компонент с 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);
}

Ответы [ 2 ]

3 голосов
/ 04 января 2012

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

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

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

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

3 голосов
/ 04 января 2012

Что происходит, так это то, что 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");
...