Question

I am switching a Rails 2.3.8 application from Prototype to jQuery. I am no longer going to use RJS, so that means I am switching my remote_form_for calls to plain old form_for.

However, the submit buttons within these forms are not doing AJAX calls. They are doing regular POSTs.

I have a jQuery function in application.js:

jQuery.fn.submitWithAjax = function () {  
  this.submit(function () {  
    alert("submitting");
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;  
  });  
};

and I am calling it on my form:

// Search
$('#lookup').submitWithAjax();

Do I instead need to call it on the button itself? I am missing some simple piece here that is preventing all the pieces from falling into place.

Answer 1

You need to $ around this for this.submit. Also, per the unspoken convention, you should probably wrap that around $.each so you can bind the event to multiple elements.

$.fn.submitWithAjax = function () {  
    $(this).each(function(){
        $(this).submit(function () {
            $.post($(this).attr('action'), $(this).serialize(), null, "script");
            return false;
          });
    });
};