jQuery plug-in to hookup AJAX form - MUST provide error callback

Question

Whats the best way to hookup AJAX functionality to an existing Form using jQuery and allow for an error handling callback.

The jQuery.ajax(...) built in function has the following (useful) callback functions:

beforeSend

complete

dataFilter

error

success

I thought I'd found my answer with the jQuery.Form plugin, but for some crazy reason they don't give you access to an error callback!! Other than this omission it seems quite useful.

I'm really dismayed in general by the amount of articles out there that recommend using jQuery.get before they would recommend jQuery.ajax. Just to recap: get() does not have an error callback, but ajax() does.

In my opinion you should always use ajax() because you always should have some kind of error handling logic.

Are there any other nice plugins - especially something that plays well with ASP.NET-MVC that I should use that make hooking everything up easier?

Answer 1

Why not to use JSon? You can collect data from form and send JSon request.

Answer 2

This is a very simple snippet that I copied from a project of mine and just hacked it a bit (barely tested). Let me know if this works.

(function() {
$.fn.ajaxify = function(options) {
    $(this).submit(function(e) {
        var form = $(this);
        $.ajax({
            type : form.attr('method'),
            url : form.attr('action'),
            data : form.serialize(),
            error : options.error,
            success : options.success,
            dataType : "script"
        });

        return false;
    });
}
})();

using it:

$('form').ajaxify(
    {success: success_method_name, 
    error: error_method_name});

Answer 3

Have you tried setting up a handler via $.ajaxError() ?

Answer 4

According to this page:

http://www.malsup.com/jquery/form/#api

"note that the Options Object can also be used to pass values to jQuery's $.ajax method. If you are familiar with the options supported by $.ajax you may use them in the Options Object passed to ajaxForm and ajaxSubmit."

This includes the 'error' handler param, however i can't get it to work...

Rich

Answer 5

This might not be a problem anymore, cause I just hooked up a error callback just fine.

e.g:

$("form#new_asset").ajaxForm({
  error: function(a, b, c) {
    alert('error')
  }
});

Answer 6

Just tested and Chris O'Sullivan is indeed correct, though at the moment I think that it is undocumented.