jquery ajax post() request not sent with XHR header

Question

The following is the javascript from my erb template. When the user submits the form, it should be hijacked by jquery, the data submitted via a $.post(), and return false should prevent the page from redirecting, and the form submitting in the traditional manner. But im still getting the redirect, and request.xhr? is returning false.

<% javascript_tag do %>
  jQuery(document).ready(function($){

    action = $('.edit_profile').attr('action');

    $('.edit_profile').submit(function(){

      form_data = $('.edit_profile').serialize();

      $.post(action, function($('.edit_profile').serialize()){
        $.colorbox.close();
      });
      return false;
    })
  });
<% end %>

Answer 1

Try this, there were a few problems with your script.

$(function(){
    $('.edit_profile').submit(function(){
        var form_data = $('.edit_profile').serialize();
        $.post(this.action, form_data, function(){
            $.colorbox.close();
        });
        return false;
    });
});