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

Question

I have jQuery code that works great when rendering a view. However, I want the same code to run after the successful execution of the Ajax request. JQuery initially ran when the document was ready, but I moved it to my own function so that it could be called. The function adds a few simple classes to some shortcut elements. Here is what I still have:

$(function () { afterLoad(); }); $.ajaxSetup({ success: function () { afterLoad(); } }); function afterLoad() { // code to execute } 

This does not execute properly after a simple Ajax request:

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

The partial view returns just fine, but afterLoad() tries to start before the partial view is in the DOM. If I made the same call again, afterLoad() would execute (in the previous partial view), but then it would be overwritten with the new partial view.

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

Answer 1

This is what I use for your attempts:

You also have access to the XHR object if 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 my structure that works for me.

site.js

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

Created fast fiddle . Is that what you mean?

Change two:

You might need a DOM listener for any <form> element that appears, and then run your afterLoad() function. It may be a pig, so I will use it carefully.

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

If I read your question correctly, the problem is that you are trying to issue 'afterLoad' after the ajax call, but before the partial view elements are added to the DOM. In this case, I think you need to call afterLoad as part of the ajax loading method:

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

If I leave let me know, happy coding!

Answer 5

Remove the ajaxSetup part.

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

And then use load as follows:

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

According to docs this should work.

Answer 6

The culprit is

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

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

try it

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

Answer 7

The above answers did not work for me. I spent a lot of time to understand this, all in vain. Finally, I got a solution that works, albeit unusual. Here. I basically reassign event handlers after adding 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) { });