Easy AJAX UI feedback using JQuery

Since JQuery is the new black (… you are using JQuery, right?) I figured this snippet might help others out there in the ether. Add these methods to your application.js file in Rails and create a div with the ID #spinner containing an AJAX spinner.

When a form is submitted via AJAX (remote_form_for), the submit button will be disabled, and the spinner will show. When the AJAX call returns #spinner will hide and the submit button will re-enable. This will also show/hide the spinner for any AJAX request. No muss, no fuss.

If you’re not using JQuery, you should. It makes Javascript a pleasure to write. aaronchi’s jrails plugin makes it stupid easy to add it to your existing Rails project.

/* On page load… */
$('document').ready(function(){

  /* Disable all submit buttons when form submitted */
  $(":form").submit(function(){
    $(":submit").attr({"disabled": true, "value": "Working…"});
  });

  $(window).bind("ajaxSend", function(){
    $("#spinner").show();
  });

  $(window).bind("ajaxStop", function(){
    $("#spinner").hide();
    $(":submit").attr({"disabled": false, "value": "Submit"});
  });

};