[SOLVED] How to use p:ajaxStatus with p:autoComplete

Components, Ajax Framework, Utilities and More.
Post Reply
User avatar
mndot_lance
Posts: 137
Joined: 15 Oct 2009, 21:53

27 Jan 2010, 22:51

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

User avatar
mndot_lance
Posts: 137
Joined: 15 Oct 2009, 21:53

27 Jan 2010, 22:54

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
Last edited by mndot_lance on 02 Feb 2010, 20:40, edited 1 time in total.

User avatar
optimus.prime
Prime
Posts: 17333
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

28 Jan 2010, 15:21

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.

User avatar
mndot_lance
Posts: 137
Joined: 15 Oct 2009, 21:53

29 Jan 2010, 03:47

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.

User avatar
optimus.prime
Prime
Posts: 17333
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

29 Jan 2010, 12:31

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. :)

User avatar
mndot_lance
Posts: 137
Joined: 15 Oct 2009, 21:53

30 Jan 2010, 01:09

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.

User avatar
optimus.prime
Prime
Posts: 17333
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

30 Jan 2010, 01:21

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.

User avatar
mndot_lance
Posts: 137
Joined: 15 Oct 2009, 21:53

02 Feb 2010, 20:38

:D

vmontes
Posts: 5
Joined: 29 May 2013, 00:26

20 Aug 2016, 01:00

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Bing [Bot] and 47 guests