Stati Ajax diversi per componenti diversi in PrimeFaces

Question

Nella mia pagina Web utilizzo lo stato ajax globale modale. Cioè, quando c'è una chiamata Aj, l'utente è bloccato dall'eseguire altre azioni ed è costretto ad aspettare. Come qui:

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

Tuttavia, tale comportamento non è desiderato per tutti i componenti della pagina. Ad esempio, per il completamento automatico sarebbe meglio avere uno non bloccante proprio accanto al componente di completamento automatico. In RichFaces, c'era un attributo status dal componente autocomplete.

In PrimeFaces (3.4 SNAPSHOT), c'è un modo per far sì che due diversi stati Ajax sulla pagina li attivino indipendentemente come necessario?

Grazie, Lukas

Answer 1

È possibile utilizzare l'attributo globale se attivare o meno ajaxStatus. Ad esempio, impostando esso falso non si innescherà ajaxStatus come questo:

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

Per altri componenti in cui si sta aggiornando con AJAX. Si può fare qualche cosa come questa:

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

UPDATE: Se si desidera che due stati poi non scrivere il proprio dialogo come questo:

<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> 

Answer 2

In primefaces 5.1 verrà visualizzato un avviso con Ravi di soluzione e non funzionerà.

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 

La soluzione corretta per primefaces 5.1 è quello di aggiungere

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

all'interno del tag di completamento automatico.

Answer 3

ho avuto lo stesso problema questa è stata la mia soluzione (non super semplice ma molto flessibile):

Se si desidera aggiungere un carico Indikator per alcuni parte della pagina è necessario aggiungere due <h:panelGroup> elementi, uno per l'indicatore di caricamento e uno per il contenuto caricato.

es .:

<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> 

importante è quello di impostare la corretta styleClass del loading per l'indicatore di caricamento e content per il contenuto. Entrambi i pannelli devono anche avere una classe che condividono, in questo caso la classe contentPreview.

Per passare dall'indicatore di caricamento al contenuto è sufficiente chiamare una funzione JavaScript. showLoading('.contentPreview') per mostrare l'indicatore di caricamento hideLoading('.contentPreview') per nascondere l'indicatore e mostrare il contenuto.

ad es.:

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

Il codice per le funzioni JavaScript appare come segue:

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'; 
    }); 
    }