How can I detect 'any' ajax request being completed using jQuery?

Question

I have a page where I can insert some javascript / jquery to manipulate the output. I don't have any other control over the page markup etc.

I need to add an extra element via jquery after each present on the page. The issue is that the elements are generated via an asynchronous call on the existing page which occurs after $(document).ready is complete.

Essentially, I need a way of calling my jquery after the page has loaded and the subsequent ajax calls have completed. Is there a way to detect the completion of any ajax call on the page and then call my own custom function to insert the additional elements after the newly created s ?

Solution 1

Unfortunately this doesn't apply since it seems the OP isn't using $.ajax() or any jQuery ajax method for actually loading content, but leaving it here in case future googler's are doing this.

---

You can use any of the global ajax events that meet your needs here, you're probably after $.ajaxComplete() or $.ajaxSuccess().

For example:

$(document).ajaxSuccess(function() {
  alert("An individual AJAX call has completed successfully");
});
//or...
$(document).ajaxComplete(function() {
  alert("ALL current AJAX calls have completed");
});

If you want to run just some generic function then attach them to document (they're just events underneath). If you want to show something in particular, for example a modal or message, you can use them a bit neater (though this doesn't seem to be what you're after), like this:

$("#myModal").ajaxComplete(function() {
  $(this).fadeIn().delay(1000).fadeOut();
});

Solution 2

This example just shows and hides elements at the start and end of ajax calls using jQuery:

    $("#contentLoading").ajaxSend(function(r, s) {
        $(this).show();
        $("#ready").hide();
    });

    $("#contentLoading").ajaxStop(function(r, s) {
        $(this).hide();
        $("#ready").show();
    });

#contentLoading is an gif image progress indicator.

Solution 3

As i could understand, you are using some jQuery's Ajax function in your ready handler. So you could just pass it another function, which will be invoked after your Ajax function gets response. For example

$(document).ready(function(){
    $("#some_div").load('/some_url/', function(){
        /* Your code goes here */
    });
});

Solution 4

You could rewrite the send() function of the XMLHttpRequest object.

See a solution for doing just so using pure Javascript here.

View more solutions