Różne statusy Ajax dla różnych komponentów w PrimeFaces

Question

Na mojej stronie używam globalnego statusu ajaxowego, który jest modalny. Oznacza to, że gdy jest wywołanie ajax, użytkownik jest zablokowany do wykonywania innych czynności i jest zmuszony czekać. Jak tutaj:

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

Jednak takie zachowanie nie jest pożądane dla wszystkich elementów na stronie. Na przykład w przypadku autouzupełniania lepiej byłoby mieć element nieblokujący tuż obok składnika autouzupełniania. W RichFaces był atrybut statusu przez element autouzupełniania.

W PrimeFaces (3.4 SNAPSHOT), czy istnieje sposób, aby dwa różne statusy ajax na stronie wyzwalały je niezależnie w razie potrzeby?

Dzięki Lukas

Answer 1

Można użyć globalnego atrybutu czy wyzwoli ajaxStatus czy nie. Na przykład, ustawienie go fałszywie nie wywoła ajaxStatus tak:

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

dla innych komponentów, gdzie jesteś aktualizacji z AJAX. Można zrobić coś takiego:

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

UPDATE: Jeśli chcesz dwa statusu potem pisz swoje własne okno jak poniżej:

<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

W Primefaces 5.1 zostanie wyświetlone ostrzeżenie z Ravi użytkownika rozwiązanie i to nie zadziała.

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 

Prawidłowe rozwiązanie dla Primefaces 5.1 jest dodanie

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

wewnątrz znacznika autouzupełniania.

Answer 3

miałem ten sam problem, to był mój Solution (nie super proste, ale bardzo elastyczny):

Jeśli chcesz dodać Indikator Loading jakiegoś części strony trzeba dodać dwa <h:panelGroup> elementów, jeden dla wskaźnik ładowania i jeden dla załadowanej treści.

np .:

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

Ważne jest, aby ustawić prawidłowy styleClass na loading dla wskaźnika Załadunek i content za ich treść. Oba panele również muszą mieć klasę, którą udostępniają, w tym przypadku klasa contentPreview.

Aby przełączyć między ładowaniem wskaźnika a treścią, wystarczy wywołać funkcję JavaScript. showLoading('.contentPreview'), aby pokazać wskaźnik obciążenia hideLoading('.contentPreview'), aby ukryć wskaźnik i wyświetlić zawartość.

np.:

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

Kod dla funkcji JavaScript wygląda następująco:

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