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

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});