Board index JavaServer Faces General [SOLVED] How to use p:ajaxStatus with p:autoComplete

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

Components, Ajax Framework, Utilities and More.

Posts: 137
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">:

         <h:outputLabel value="Route" for="route" />
            id="route" value="#{parentHandler.currentRelationship.element.tisCode}" minQueryLength="2"
            converter="routeNameTisCodeConverter" completeMethod="#{menuHandler.getRouteNumberList}"  />

          <f:facet name="start"> 
          <h:graphicImage value="/img/ajaxloading.gif" /> 
    <f:facet name="complete"> 
         <h:outputText value="Ajax Request Completed" /> 

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

Posts: 137
Side Note:

I was just looking at the p:autocomplete in the showcase and it appears to not be working: ... 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.

Posts: 16627
Location: Cybertron

Yes, p:ajaxStatus does not support p:autoComplete. Still it's quite easy to display loading message with client side api. ... 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.
PrimeFaces Lead

Posts: 137
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.

Posts: 16627
Location: Cybertron

YUI is fun and easy to work with so just set a widgetVar on your autocomplete like;

<p:autoComplete widgetVar="ac" ... />

Then on page load;
//define your itemSelect handler function:
onRequestHandler= function( oSelf , sQuery , oRequest) {
   //show loading info

onResponseHandler= function( oSelf , sQuery , aResults) {
   //hide loading info


If something is not provided out-of-the box with PrimeFaces, it's usually possible to do with client side API. :)
PrimeFaces Lead

Posts: 137
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.

Posts: 16627
Location: Cybertron

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

Posts: 4
I Just use the property queryDelay

My autocomplete looks like this and work perfect

<p:autoComplete id="txtSearch" widgetVar="acSearch"
var="cliente" queryDelay="1000"
itemLabel="#{administrarFacturasBean.clienteSelected == null ? '' : administrarFacturasBean.clienteSelected.clave.trim().concat(' - ').concat(administrarFacturasBean.clienteSelected.nombre)}"
maxResults="15" forceSelection="true">

Im using PrimeFaces 5.3 on Liferay Portal

Return to General