How to call a jQuery function after ANY successful Ajax request with MVC partial views

Question

I have jQuery code that runs fine when a view is render. However, I want this same code to run after an Ajax request is successful. The jQuery was originally performed when the document was ready, but I moved it to it's own function so it can be called. The function adds a few simple classes to some label elements. Here is what I have so far:

$(function () {
    afterLoad();
});

$.ajaxSetup({
    success: function () {
        afterLoad();
    }
});

function afterLoad() {
    // code to execute
}

This doesn't execute properly after making a simple Ajax request:

$('#ajaxTest').load('<MVC Route>')

A partial view is returned just fine, but afterLoad() attempts to run before the partial view is in the DOM. If I were to execute the same call again afterLoad() does run (on the previous partial view), but then it gets overwritten by the new partial view.

Any thoughts? Another approach to this would be fine, I'm looking for a was to get the site-level .js file to run after an Ajax request for a partial view. The master page loads the site.js file, and I would like to execute it's code without reloading the file (since it's already been loaded by the browser). Also, I don't want to have to force developers to do anything different with their Ajax calls so it needs to work with a simple .load(), etc.

Answer 1

This is what I use for what your trying to do:

You also have access to the XHR object should you need to access it.

//Global Ajax Complete
$("body").bind("ajaxSend", function(e, xhr, settings){
    //Sent
}).bind("ajaxComplete", function(e, xhr, settings){
    //Complete
}).bind("ajaxError", function(e, xhr, settings, thrownError){
    //Error
});

EDIT: This is the structure I have, which has been working for me.

site.js

function afterLoad() {
    // code to execute
}
$(document).ready(function(){
    $("body").bind("ajaxComplete", function(e, xhr, settings){
           afterLoad();
    });
});

Created a quick fiddle. is this what you mean?

Edit Two:

You might want to have a listener on the DOM for any <form> element that appears then run your afterLoad() function. This might be a performance hog so I would use it cautiously.

I use livequery to do this

$('form').livequery(function(){
    afterLoad();
});

Answer 2

You can set global AJAX defaults in jQuery

like this

$.ajaxComplete(function(){
       afterLoad();
    });

so your method will be executed when ajaxCompleted

Answer 3

This works fine for me:

$( document ).ajaxComplete(function( event,request, settings ) {
  //your code here to run when ajax is complete
  alert("Complete");
});