Getting JQuery beforeSend and complete to work in Rails 3

Question

I am trying to implement the solution as outlined in this post but can't get it to work.

application.js

$(document).ready(function(){
    $.ajaxSetup({
      beforeSend:function(){
          $('#loading').show();
        },
      complete:function(){
          $('#loading').hide();
        }
    });
});

application.html.erb

  <div id="loading" style="display:none;"><img src="/img/ajax-loader-circle.gif" ></br></br>Please wait...</div>

From my form, I added :remote => true and I could tell that an AJAX call was made looking at Rails logs. However, beforeSend show never got triggered. Thoughts?

Answer 1

I would recommend using:

$('#loading').ajaxStart(function(){
  $(this).show();
}).ajaxStop(function(){
  $(this).hide();
});

or if you want it for a particular form ID:

$('#someFormID')
.ajaxStart(function() {
    $('#loading').show();
})
.ajaxStop(function() {
    $('#loading').hide();
});

Make sure it's wrapped in a DOM ready block (like you've done). These are both working examples from one of my apps.