Problems with Rails 3 Remote Links and Forms Using jQuery .live() in IE

This will be a quick post. I just wanted to point out that there is a problem with AJAX response handling for Rails 3 remote links and forms in Internet Explorer. This problem affects applications still using jQuery 1.4.2.

Upon clicking a remote link or submitting a remote form, the following code will work in Firefox, Safari, and Chrome, but nothing will happen in Internet Explorer:

$('a, form').live('ajax:success', function(){
  alert('Success!');
});

The problem is that IE7 and IE8 do not "bubble" custom events, such as `ajax:success`, `ajax:failure`, etc., to the top of the DOM tree.

See Exploring jQuery .live() and .die() for an explanation of how .live() depends on event bubbling.

Thankfully, this limitation has been overcome with some more jQuery magic in v1.4.4. So, simply upgrade your application to use jQuery 1.4.4 or later, along with the latest rails.js jQuery UJS driver, and now your remote link and form response handling will work in IE.

If for some reason, upgrading jQuery is not an option, you could also directly `.bind()` your function to the custom ajax events, instead of relying on `.live()`:

$('a, form').bind('ajax:success', function(){
  alert('Success!');
});

Of course, this will now only work for links and forms that are already on the page when the javascript is loaded. Unfortunately, jQuery's `.delegate()` method also will not work with these custom triggered events for the same reason.

For a full explanation of Rails 3 AJAX response handling for remote links and forms, see Rails 3 Remote Links and Forms: A Definitive Guide.

---