Rails remote form callback ajax:loading does not fire, others do

Question

Here's my code:

$('#fb_login_form').bind('ajax:loading', function() {alert("loading!");});
.bind('ajax:success', function(data, status, xhr) {alert("success!");})
.bind('ajax:failure', function(xhr, status, error) {alert("failure!");})
.bind('ajax:complete', function() {alert("complete!");});

ajax:success and ajax:complete fire and I see both alerts. ajax:loading does not.

I am using jQuery instead of prototypes. Why?

Answer 1

Please correct your ajax event method name with below link

http://docs.jquery.com/Ajax_Events

Answer 2

@user531065 is actually right that Rails 3 implements its own callback names. It's implemented in the rails.js (Prototype) or jquery_ujs.js (jQuery) drivers. Both of these drivers play the javascript role in making AJAX links and forms unobtrusive.

I'm in the process of migrating a Rails 2.3 app to Rails 3 and ran into a similar issue with callbacks not firing.

One thing to look out for is if you're using the Prototype driver, use Prototype to define your callbacks:

$('edit_foo').observe('ajax:before', loading_function());
$('edit_foo').observe('ajax:complete', complete_function());

Use the syntax in the original question for a Jquery UJS driver. If you're uncertain which UJS driver you have, check public/javascripts for either rails.js or jquery_ujs.js. This applies to Rails 3.0; I believe Rails 3.1 changes to use jquery as the default UJS driver.

Regardless of which UJS driver you have, you should be able to look inside the file and verify that there are the following callbacks: ajax:beforeSend, ajax:success, ajax:complete, ajax:error.

There were actually a couple of reasons why my AJAX callbacks weren't firing:

• using a different javascript library to define the callbacks from the UJS driver
• using both javascript libraries at the same time (this can be done, but requires calling jQuery.noConflict())
  • include prototype first.
  • Call jQuery.noConflict() after the jquery, jquery_ujs, and application javascript include tags, but before include tags for other js libraries
  • Don't call javascript_include_tag :defaults when using both libraries, as you have to specify the js include order

Edit: The answer to your question lies in this link. Apparently the original 6 ajax events that the Rails UJS driver implemented were: ajax:before, ajax:loading, ajax:success, ajax:failure, ajax:complete, ajax:after.

These 6 were edited down to:

• ajax:beforeSend
• ajax:success
• ajax:complete
• ajax:error

The reason 2 of your events fired is because they were unchanged. The other didn't fire because it was removed. You were probably looking at old docs, maybe for an early version of Rails 3 or a prerelease.