Diferentes estados de Ajax para diferentes componentes en PrimeFaces

Question

En mi página web utilizo el estado global de ajax modal. Es decir, cuando hay una llamada ajax, el usuario está bloqueado para realizar otras acciones y se ve obligado a esperar. Como aquí:

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

Sin embargo, no se desea este tipo de comportamiento para todos los componentes de la página. Por ejemplo, para autocompletar, sería más agradable tener uno que no sea de bloqueo justo al lado del componente de autocompletar. En RichFaces, había un atributo de estado por componente de autocompletar.

En PrimeFaces (3.4 SNAPSHOT), ¿hay alguna forma de cómo tener dos estados diferentes de ajax en la página para desencadenarlos de forma independiente según sea necesario?

Gracias, Lukas

Answer 1

Puede utilizar el atributo global si se inicia o no ajaxStatus. Por ejemplo, para ajustarlo falsa no se disparará ajaxStatus así:

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

para otros componentes donde se está actualizando con el Ajax. Se puede hacer algo como esto:

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

ACTUALIZACIÓN: Si quieres dos estados entonces escribir su propio diálogo como este:

<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

En Primefaces 5,1 verá una advertencia con Ravi solución y no funcionará.

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 solución correcta para Primefaces 5.1 es añadir

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

dentro de la etiqueta Autocompletar.

Answer 3

Yo tenía el mismo problema que esta era mi solución (no super simple pero muy flexible):

Si desea añadir una carga Indikator por alguna parte de la página es necesario agregar dos <h:panelGroup> elementos, uno para el indicador de carga y uno para el contenido cargado.

ej .:

<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 es establecer la correcta styleClass de loading para el Indicador de Carga y content para el contenido. Ambos paneles también necesitan tener una clase que comparten, en este caso, la clase contentPreview.

Para alternar entre el indicador de carga y el contenido, solo tiene que llamar a una función de JavaScript. showLoading('.contentPreview') para mostrar el indicador de carga hideLoading('.contentPreview') para ocultar el indicador y mostrar el contenido.

p. Ej.:

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

El código para las funciones de JavaScript se ve de la siguiente manera:

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