How to display an animated icon during Ajax request processing - Rails 3

I usually have this piece of code saved to situations like these:

$(function() {  $('#loading-indicator')    .hide()  // hide it initially.    .ajaxStart(function() {      $(this).show(); // show on any Ajax event.    })    .ajaxStop(function() {      $(this).hide(); // hide it when it is done.  });});

--- EDIT ---

This will not work with the latest versions of jQuery. As of jQuery 1.8, the .ajaxStart() method should only be attached to document. The code should therefore look as follows:

$(function() {  $('#loading-indicator').hide();  // hide it initially.  $(document)      .ajaxStart(function() {      $('#loading-indicator').show(); // show on any Ajax event.    })    .ajaxStop(function() {      $('#loading-indicator').hide(); // hide it when it is done.  });});

You technically can't use the same "id" twice for two different elements in the same document. i.e. you are assigning id="loading-indicator" to both the div and the img tags; this might be causing JS DOM selection and manipulation errors.

The problem was in the css style tag and the css position

I fix it by doing this:

HTML:

<div id="loading-indicator"> <%= image_tag("loading.gif", :id => "loading-indicator") %></div>

CSS:

#loading-indicator {   left: 10px;   top: 10px; }