16

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 ?

Brian Scott
  • 9,221
  • 6
  • 47
  • 68
  • I misunderstood, I thought you were actually using `$.ajax()`, I would add the sharepoint details here, since that greatly changes the question...I'm not sure what if *any* events it fires, you may have to poll to see if a dynamically loaded object is present to do what you want. – Nick Craver May 26 '10 at 11:48
  • Nick, I think in relation to the original query stating "jQuery" in the title your assumption was correct. I can't see your answer any more but if you readd the reference to $.ajaxComplete I'll happily accept the answer. – Brian Scott May 27 '10 at 16:02
  • I undeleted the answer in case it's of use to future googlers that may come across this that *are* doing the ajax loading via jQuery...sorry there's not a clear-cut way to do this with SharePoint, at least on the client...there may be some option server-side to call a specific method. – Nick Craver May 29 '10 at 01:12

5 Answers5

52

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();
});
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Hi Nick, I tried your example and had been attempting to use the ajaxSuccess earlier but without any luck. I think your example is correct but it is not firing an alert for me. To add a little more background; I'm attempting to add more elements to the output of a standard Sharepoint webpart. The webpart lists a series of document under a parent / child grouping. Initially the page loads with the parent elements and then calls an ajax request to load the children documents. It's at this point that I can't detect the ajax call to apply jquery to the returning elements. – Brian Scott May 26 '10 at 10:38
  • 1
    For guuglers is also function: $(document).ajaxStart(function(){ – user956584 Jul 15 '12 at 23:34
  • 1
    Here's what I use [jquery.ajax.tracker](https://github.com/jmb-mage/ajax-request-tracker/blob/master/jquery.ajax.tracker.js) – jmbmage May 22 '15 at 15:27
  • Just adding this that may be useful to get information on the actual response: `$( document ).ajaxComplete(function( event, xhr, settings ) { if ( settings.url === "ajax/test.html" ) { $( ".log" ).text( "Triggered ajaxComplete handler. The result is " + xhr.responseText ); } });` – Oscar Azpeitia Feb 21 '20 at 09:04
3

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.

Gutzofter
  • 2,003
  • 23
  • 26
1

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

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

Community
  • 1
  • 1
Sébastien Brodeur
  • 159
  • 1
  • 5
1

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 */
    });
});
sanya
  • 43
  • 1
  • 4
0

You could use .live()/.delegate().

Tgr
  • 27,442
  • 12
  • 81
  • 118