How to display an activity loader automatically with all ajax requests?

Question

I am working on Ruby on Rails application, with Prototype. I want to display a loading div automatically with every ajax request and hide it on completion, without writing code for every ajax request in my application. Is there anyway to do this.

<div id="loader">Loading...</div>

Answer 1

I can't tell you how to do this in Prototype, but I once implemented something similar in Dojo: The trick was to extend the "xhrGet"-method which was responsible for AJAX-requests. Doing that I had my own methods that would start on the request and handle the "done"-event where I could show/hide a loader.

I assume you can extend methods in Prototype so this may get you started.

Answer 2

You may want to check out this article:

• Automatic Ajax Loading Images With Prototype by Ben Kittrell

Basically you can handle it with:

  Ajax.Responders.register({
     onCreate : startLoading,
     onComplete : stopLoading
  });

Where startLoading and stopLoading are callback functions that show/hide your activity indicator.