Rails 3 AJAX remote form call backs

Question

I'm upgrading from rails 2.3.8 to 3.0.0, so I need to replace the remote_form_for helper calls with form_for(@object, :remote=>true).

I've been following along with Simone Carletti but I cant seem to get the ajax callbacks from rails.js to fire.

My generated HTML is:

<form accept-charset="UTF-8" action="/vendor_shipments" class="new_vendor_shipment" data-remote="true" id="formname" method="post">

The javascript I'm testing with:

jQuery(function($){ 
   alert('document ready');
   $("#formname")
      .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!");});
});

The 'document ready' alert fires, and the ajax request is successfully executed (data is posted to the server), but none of the 'ajax:____' callbacks fire.

What am I doing wrong?

(for what it's worth, the form itself is loaded via ajax)

Answer 1

I don't see any place where you are waiting for the document to finish loading. The jQuery bind is executed prior to the form being rendered. Try this:

jQuery(function($) {
  $(document).ready(function() {
    alert('document ready');
    $("#formname")
      .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!");});
  });
});

Answer 2

Wow, that was a colossal waste of an evening.

Doing it the way I did, the default prototype rails.js won't linkup the callbacks.

After converting to the jQuery based rails.js (http://github.com/rails/jquery-ujs) callbacks are working fine.