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

Answer 4

Above answers didn't worked for me. I wasted a lot of time to figure it out, all in vain. Finally I got a solution that works though in a bit unusual way. Here it is. Basically I am reassigning the event handlers after appending the DOM elements from AJAX

function autoLoad(){
//write event handlers which you are again going to assign to the ajax appended     dom elements
}

$(document).ready(function(){
autoLoad;
//more event handlers if present (non dynamic DOM elements)
//Any other Jquery stuff
});

$.ajax({    
//send request here
}).done(function(html) {
//unbind the event handlers assigned in autoload function
append ajax results here
autoLoad();
}).fail(function(ts) {
});

Answer 5

If I'm reading your question right, the issue is that you're attempting to issue 'afterLoad' after the ajax call, but before the partial view elements are added to the DOM. In that case, I think you need to call afterLoad as a part of the ajax load method:

$('#ajaxTest').load('<MVC Route>', null, 
    function (responseText, textStatus, XMLHttpRequest) 
    { 
        afterLoad(); 
    });

If I'm off base, let me know, happy coding!

Answer 6

Remove the ajaxSetup part.

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

And then use load like this:

$('#ajaxTest').load('<MVC Route>', function(){
       afterLoad();
    });

As per the docs, this should work.

Answer 7

The culprit is this

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

load internally uses $.get to fetch the data and when it calls the success handler afterLoad method is called before even setting the data into the element. You might have to go with some other approach this will not work.

Try this

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