STEP 1.
Create an element on the page and give this element an attribute id = "loader" (or anything you prefer).
I mostly use a IMG element displaying an animated GIF file.
You can get ajax indicator icon here http://www.ajaxload.info/
STEP 2.
Create a file application.js in your public/javascripts folder, and be sure to use <%= javascript_include_tag :defaults %> in the HEAD section of your layout or view template to include the Rails-provided JavaScripts.
Insert the following code into the application.js file:
Ajax.Responders.register({
onCreate: function() {
if($('loader') && Ajax.activeRequestCount>0)
Effect.Appear('loader',{duration:0.5,queue:'end'});
},
onComplete: function() {
if($('loader') && Ajax.activeRequestCount==0)
Effect.Fade('loader',{duration:0.5,queue:'end'});
}
});
onCreate: function() {
if($('loader') && Ajax.activeRequestCount>0)
Effect.Appear('loader',{
},
onComplete: function() {
if($('loader') && Ajax.activeRequestCount==0)
Effect.Fade('loader',{
}
});
STEP 3.
Everytime an ajax request is made the element with the indicator is visible and
once the request is complete the element is faded to invisible.
ENJOY!
My Linux Support Inc.
www.mylinuxsupport.com
