jQuery binding to a form submit

Question

I'm doing the following:

    // Post to the server
    $.ajax({
        type: 'POST',
        url: $("form.edit_item").attr("action"),
        data: $("form.edit_item").serialize(),
        success: function(e) {
        }
    });


$(".edit_item")
    .bind('ajax:loading', function() {
        alert('go');
    })
    .bind('ajax:success', function(data, status, xhr) {
        alert('going');
    })
});

On the form:

<form accept-charset="UTF-8" action="/xxxxx/18" class="edit_item" id="edit_item_31" method="post"><div 

While the form posting works fine.the ajax binds are not working. What can I try next?

Answer 1

In your $.ajax options, add a beforeSend handler:

  $.ajax({
    type: 'POST',
    url: $("form.edit_item").attr("action"),
    data: $("form.edit_item").serialize(),
    beforeSend: function() {
        alert('go');
    },
    success: function(e) {
        alert('going');
    }
});

Answer 2

You can bind to the events that do fire, ajaxSend and ajaxSuccess, like this:

$(".edit_item").bind({
  ajaxSend: function() {
    alert('go');
  },
  ajaxSuccess: function() {
    alert('going');
  }
});

These fire per request is for you want alerts when a batch starts/finishes, replace ajaxSend with ajaxStart and ajaxSuccess with ajaxStop.