JavaScript在Primefaces AJAX事件調用完成之前檢索數據

在TabView primefaces組件中，在tabChange上，我想執行ajax-call來更新bean中需要由javascript處理的bean數據（某些圖表）。JavaScript在Primefaces AJAX事件調用完成之前檢索數據

我遇到的問題是數據正確地用我的ajax調用更新，但使用數據的javascript在被ajax調用更新之前被檢索。

這是在tabChange事件中帶有ajax-call的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); 
}

來源

2012-01-04 user373455

正在發生的事情是，服務器回發發生前，onTabChange JavaScript是執行。這是正常行爲，雖然許多Primefaces組件具有oncomplete屬性，但TabView沒有此屬性。

您可以通過在RequestContext上添加一個JavaScript來告訴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");

來源

2012-01-04 12:19:19

它的作品都很好！感謝與提示。它確實會導致問題，但正如你所提到的，通過在ajax組件中添加「更新」來解決問題！謝謝！ – user373455 2012-01-04 14:23:27

@ user373455沒問題:)如果你看看Mr.J4mes在下面回答，它也應該解決Javascript的問題，並且我認爲這是一個更乾淨的解決方案，因爲它不需要額外的Java代碼。 – 2012-01-04 14:36:05

如果您在<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函數返回只有當。此外，不要忘記重新渲染頁面中應該顯示update屬性<p:ajax>的新數據的任何部分。

來源

2012-01-04 13:53:40

這是更好的答案。我忘記了''已經擁有'oncomplete'屬性。 – 2012-01-04 13:57:26

@maple_shaft：謝謝:) – 2012-01-04 14:09:47

我沒有看到這個更新，直到我嘗試了楓樹解決方案，它的工作。然而，這看起來像楓，說整潔。我試過了，但是我收到一個錯誤，提示「index is not defined」。然而，它只能發送「事件」。是否有可能從事件對象中檢索索引（或標籤ID？）？ – user373455 2012-01-04 14:38:50

JavaScript在Primefaces AJAX事件調用完成之前檢索數據

回答

相關問題