Различные статусы Ajax для разных компонентов в PrimeFaces
На моей веб-странице я использую глобальный статус ajax, который является модальным. То есть, когда есть аякс-вызов, пользователь блокируется от выполнения других действий и вынужден ждать. Как здесь:
http://www.primefaces.org/showcase-labs/ui/ajaxStatusScript.jsf
Однако такое поведение нежелательно для всех компонентов на странице. Например, для автозаполнения было бы лучше иметь неблокирующую систему рядом с компонентом автозаполнения. В RichFaces атрибут статуса был автокомпонентным компонентом.
В PrimeFaces (3.4 SNAPSHOT) существует ли способ, когда два разных состояния ajax на странице запускают их независимо по мере необходимости?
Спасибо,
Lukas
Ответы
Ответ 1
Вы можете использовать глобальный атрибут, следует ли запускать 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>
Ответ 2
В Primefaces 5.1 вы увидите предупреждение с решением Ravi, и оно не будет работать.
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"/>
внутри тега автозаполнения.
Ответ 3
У меня была одна и та же проблема. Это было мое решение (не очень простое, но очень гибкое):
Если вы хотите добавить Индексатор загрузки для некоторой части страницы, вам нужно добавить два элемента <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>
Важно установить правильный стильClass 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';
});
}