針對PrimeFaces中不同組件的不同Ajax狀態

在我的網頁上，我使用了模態屬性的全局ajax狀態。也就是說，當有一個Ajax調用時，用戶被阻止執行其他操作並被迫等待。喜歡這裏：針對PrimeFaces中不同組件的不同Ajax狀態

http://www.primefaces.org/showcase-labs/ui/ajaxStatusScript.jsf

然而，這樣的行爲是不希望在頁面上的所有組件。例如，對於自動完成，在自動完成組件旁邊有非阻塞的更好。在RichFaces中，自動完成組件具有狀態屬性。

在PrimeFaces（3.4 SNAPSHOT）中，有沒有辦法讓頁面上的兩個不同的ajax狀態根據需要獨立觸發它們？

感謝，盧卡斯

2012-08-03 lukas

您可以使用全局屬性是否觸發ajaxStatus與否。例如，將其設置爲false將不會觸發ajaxStatus這樣的：

<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" 
completeMethod="#{autoCompleteBean.complete}" global="false"/>

對於其他組件，你用AJAX更新。你可以做一些這樣的事：

<p:inputText value="#{autoCompleteBean.txt1}"> 
    <f:validateLength minimum="2" /> 
    <p:ajax global="false" update="email" event="keyup"/> 
</p:inputText>

UPDATE：如果你希望兩個狀態，那麼請寫自己的對話是這樣的：

<p:dialog widgetVar="status" modal="true" closable="false"> 
    Please Wait 
</p:dialog> 

<p:inputText value="#{autoCompleteBean.txt1}"> 
    <f:validateLength minimum="2" /> 
    <p:ajax global="false" onstart="status.show()" oncomplete="status.hide()" update="email" event="keyup"/> 
</p:inputText>

來源

2012-08-03 04:32:44 Ravi

很好，但如果我想觸發不同的AJAX狀態是什麼？我不想完全關閉它。我想觸發不同行爲不同的人 – lukas 2012-08-03 15:46:57

我也對souch一個解決方案感興趣...你有沒有找到一個可行的方法？ – simonC 2013-08-28 08:25:13

Primefaces 5.1不再具有此屬性'global'。任何建議。對於自動填充組件。 – 2015-08-31 20:28:03

在Primefaces 5.1，你會看到拉維的警告解決方案，它不會工作。

27-Mar-2015 14:35:41.877 WARNING [http-apr-8080-exec-2] org.primefaces.component.autocomplete.AutoCompleteRenderer.encodeScript The process/global/onstart/oncomplete attribute of AutoComplete was removed. Please use p:ajax with the query event now

爲Primefaces 5.1正確解決方案是增加

<p:ajax event="query" global="false"/>

自動完成標記內。

來源

2015-03-27 13:46:33 leo

這是最近的正確答案（今天！）。 – Cold 2017-01-09 10:48:48

這在6.1中不起作用。自動完成只是停止查詢。 – James 2017-10-21 16:11:27

我有同樣的問題，這是我的解決方案（不是超級簡單，但非常靈活的）：

如果你想添加一個加載Indikator你需要添加兩個<h:panelGroup>元素，一個頁面的某些部分加載指示器和一個用於加載的內容。

例如爲：

<h:panelGroup styleClass="contentPreview content"> 
     <h:outputText id="previewText" styleClass="updatePreview" value="#{lazyResultBean.previewContent}" /> 
    </h:panelGroup> 
    <h:panelGroup styleClass="contentPreview loading"> 
     <p:graphicImage style="width: 15px; height: 15px;" name="/images/ajax-loader.gif" /> 
    </h:panelGroup>

重要的是設置正確的styleClass的loading的負載指示和content的內容。這兩個面板也需要有一個他們共享的類，在這種情況下是contentPreview類。

要在加載指標和內容之間切換，您只需調用JavaScript函數即可。 showLoading('.contentPreview')顯示加載指示器 hideLoading('.contentPreview')隱藏指示器並顯示內容。

例如：

<p:commandButton id="previewBtn" onstart="showLoading('.contentPreview')" oncomplete="hideLoading('.contentPreview')" value="Preview" update="previewText" actionListener="#{lazyResultBean.loadPreviewContent(result.url)}"> 
    </p:commandButton>

的JavaScript函數的代碼如下：

function showLoading(clazz) { 
    console.log('showLoading' + clazz); 
    var loadingElements = $(clazz + '.loading'); 
    loadingElements.each(function (index, el) { 
     el.style.display = 'block'; 
    }); 

    var contentElements = $(clazz + '.content'); 
    contentElements.each(function (index, el) { 
     el.style.display = 'none'; 
    }); 
    }

function hideLoading(clazz) { 
    console.log('hideLoading' + clazz); 
    var loadingElements = $(clazz + '.loading'); 
    loadingElements.each(function (index, el) { 
     el.style.display = 'none'; 
    }); 

    var contentElements = $(clazz + '.content'); 
    contentElements.each(function (index, el) { 
     el.style.display = 'block'; 
    }); 
    }

來源

2015-09-21 13:54:04 Nero

針對PrimeFaces中不同組件的不同Ajax狀態

回答

相關問題