Différents états Ajax pour différents composants dans PrimeFaces

Question

Sur ma page Web, j'utilise le statut ajax global qui est modal. C'est-à-dire, lorsqu'il y a un appel ajax, l'utilisateur est bloqué pour effectuer d'autres actions et est forcé d'attendre. Comme ici:

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

Cependant, un tel comportement n'est pas souhaité pour tous les composants sur la page. Par exemple, pour la saisie semi-automatique, il serait plus agréable d'avoir un non-bloquant juste à côté du composant de saisie semi-automatique. Dans RichFaces, il y avait un attribut status par composant autocomplete.

Dans PrimeFaces (3.4 SNAPSHOT), existe-t-il un moyen de faire en sorte que deux statuts ajax différents sur la page les déclenchent indépendamment comme nécessaire?

Merci, Lukas

Answer 1

Vous pouvez utiliser l'attribut global que ce soit pour déclencher ajaxStatus ou non. Par exemple, la mise en faux il ne déclenche pas ajaxStatus comme ceci:

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

Pour d'autres composants où vous mettez à jour avec ajax. Vous pouvez faire quelque chose comme ceci:

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

MISE À JOUR: Si vous voulez deux états alors ne pas écrire votre propre dialogue comme ceci:

<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, vous verrez un avertissement avec Ravi de solution et cela ne fonctionnera pas.

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 bonne solution pour Primefaces 5.1 est d'ajouter

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

dans la balise autoComplete.

Answer 3

J'ai eu le même problème que c'était ma solution (pas super simple mais très flexible):

Si vous souhaitez ajouter un Indikator de chargement pour une partie de la page que vous devez ajouter deux <h:panelGroup> éléments, un pour l'indicateur de chargement et un pour le contenu chargé.

.: par exemple

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

important est de définir la styleClass correcte de loading pour l'indicateur de chargement et content pour le contenu. Les deux panneaux doivent également avoir une classe qu'ils partagent, dans ce cas la classe contentPreview.

Pour basculer entre le chargement de l'indicateur et du contenu, il suffit d'appeler une fonction JavaScript. showLoading('.contentPreview') pour afficher l'indicateur de chargement hideLoading('.contentPreview') pour masquer l'indicateur et afficher le contenu.

par exemple.:

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

Le code pour les fonctions JavaScript se présente comme suit:

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

bien