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


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


Posts: 15076
Location: Cybertron

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.
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: 15076
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
};
 

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



Return to General