Attach functions to jquery ajax call

Posted by davidejones

A lot of the work I’m doing at the moment needs me to come up with JQuery solutions to website problems rather than changing server side code or sometimes even regular html. This is due to the fact that the website code I’m working with is shared with so many other websites that changes need to be considered carefully and used only in certain areas.

Anyway this limitation means I need to alter existing javascript or jquery to tweak the functionality or response. This can become very tricky when you don’t have direct access to the javascript being called and I have to attempt to override or work around the javascript already in place.

One such site I’ve worked on had a lot of ajax post requests going on for shopping cart functionality. After pulling my hair out for some time i found a little snippet of Jquery that saved me a lot of hassle. I can attach an ajaxComplete event listener to the document and any ajax calls can then call my function on completion meaning i can add new functionality or undo something etc.

Its as simple as this

$(document).ajaxComplete(function(e, xhr, settings) {
    //do something on any ajax request completion
});

or of course you can still target a specific element as usual and listen for the completion

$(".ajaxclass").ajaxComplete(function(e, xhr, settings) {
    //do something on this ajax request completion
});

Trackback URL for this post: http://davidejones.com/blog/1664-attach-functions-jquery-ajax/trackback/

Being Sociable...

  • If you like this article then please share it on your favourite social network and follow me on twitter for the latest updates

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>