Page 1 of 1
[SOLVED] How to use p:ajaxStatus with p:autoComplete
Posted: 27 Jan 2010, 22:51
by mndot_lance
I'd like the user to see a "loading" .gif image while the p:autocomplete function makes its ajax call.
Here's my code, which does not seem to invoke <f:fast name="start">:
Code: Select all
<h:outputLabel value="Route" for="route" />
<p:autoComplete
id="route" value="#{parentHandler.currentRelationship.element.tisCode}" minQueryLength="2"
converter="routeNameTisCodeConverter" completeMethod="#{menuHandler.getRouteNumberList}" />
<p:ajaxStatus>
<f:facet name="start">
<h:graphicImage value="/img/ajaxloading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="Ajax Request Completed" />
</f:facet>
</p:ajaxStatus>
Don't worry about the routeNameTisCodeConverter converter. It simply does some "business logic" to translate the user's String into a String more meaningful in the database...
Re: How to use p:ajaxStatus with p:autoComplete
Posted: 27 Jan 2010, 22:54
by mndot_lance
Side Note:
I was just looking at the p:autocomplete in the showcase and it appears to not be working:
http://www.primefaces.org:8080/prime-sh ... eBasic.jsf
UPDATE: seems to be working fine now /shrug
Re: How to use p:ajaxStatus with p:autoComplete
Posted: 28 Jan 2010, 15:21
by cagatay.civici
Yes, p:ajaxStatus does not support p:autoComplete. Still it's quite easy to display loading message with client side api.
http://developer.yahoo.com/yui/docs/YAH ... plete.html
dataRequestEvent and dataResponseEvent are useful to do this kind of work. You can make a loading image visible on dataRequestEvent and hide it on dataResponseEvent, it makes sense for us to add two built-in attributes to p:autoComplete like onRequest, onResponse.
Re: How to use p:ajaxStatus with p:autoComplete
Posted: 29 Jan 2010, 03:47
by mndot_lance
Although I'm very familiar with JavaScript, I'm not familiar with this yahoo library. How do I edit what happens during this dataRequestEvent ? I see that this is the event fired when the AutoComplete instance makes a request to the DataSource, but I'm not sure how I would capture or edit this event....?
Thanks for your time,Cagatay. Sorry to ask you to spell it out for me, haha, I'm just confused with this client-side framework.
Re: How to use p:ajaxStatus with p:autoComplete
Posted: 29 Jan 2010, 12:31
by cagatay.civici
YUI is fun and easy to work with so just set a widgetVar on your autocomplete like;
Code: Select all
<p:autoComplete widgetVar="ac" ... />
Then on page load;
Code: Select all
//define your itemSelect handler function:
onRequestHandler= function( oSelf , sQuery , oRequest) {
//show loading info
};
onResponseHandler= function( oSelf , sQuery , aResults) {
//hide loading info
};
ac.dataRequestEvent.subscribe(onRequestHandler);
ac.dataReturnEvent.subscribe(onResponseHandler);
If something is not provided out-of-the box with PrimeFaces, it's usually possible to do with client side API.
![Smile :)](./images/smilies/icon_e_smile.gif)
Re: How to use p:ajaxStatus with p:autoComplete
Posted: 30 Jan 2010, 01:09
by mndot_lance
Thanks again cagatay! Yes, I'm using the included JQuery API to accomplish some neat stuff, I just haven't heard of YUI yet. I'll look into it more, thanks.
Re: How to use p:ajaxStatus with p:autoComplete
Posted: 30 Jan 2010, 01:21
by cagatay.civici
You are welcome Lance, I think as a future enhancement PrimeFaces should do this behind the scenes and handle p:ajaxStatus integration by itself. Sounds like a nice future enhancement.
Re: How to use p:ajaxStatus with p:autoComplete
Posted: 02 Feb 2010, 20:38
by mndot_lance
Re: [SOLVED] How to use p:ajaxStatus with p:autoComplete
Posted: 20 Aug 2016, 01:00
by vmontes
I Just use the property queryDelay
My autocomplete looks like this and work perfect
<p:autoComplete id="txtSearch" widgetVar="acSearch"
value="#{administrarFacturasBean.clienteSelectedString}"
var="cliente" queryDelay="1000"
completeMethod="#{administrarFacturasBean.completeClientes}"
itemLabel="#{administrarFacturasBean.clienteSelected == null ? '' : administrarFacturasBean.clienteSelected.clave.trim().concat(' - ').concat(administrarFacturasBean.clienteSelected.nombre)}"
itemValue="#{cliente.clave}:#{cliente.tipoCliente.clave}:#{cliente.subTipo}"
groupBy="#{cliente.tipoCliente}"
minQueryLength="3"
maxResults="15" forceSelection="true">
Im using PrimeFaces 5.3 on Liferay Portal