jQuery wait until the page (with several webparts and Ajax controls) loaded

Question

I have a page which has several web parts. In some of them, it has Ajax controls. now, I need to do this:

after the page is fully loaded, I want to use jQuery to change some attr for some links (a tag).

I tried:

Document ready event, not working
Window load event, not working
After window load event, wait 10 seconds, then make change, still not working.

Any other suggestions how to do it?

thanks

Posting the javascript code is helpful. Have you tried ExecuteOrDelayUntilScriptLoaded? (Assuming SP 2010) — Robert Lindgren, Dec 19 '13 at 20:00
If 10 seconds after windows load isn't enough then I'm pretty sure that the Ajax controls are to blame, what controls are these? Do they have a callback function? — Per Jakobsen, Dec 19 '13 at 20:12
You could always poll the page with javascript's setInterval function — RJ Cuthbertson, Dec 19 '13 at 21:31
Wouldn't .live events in a doc ready function work for this? It would bind to content pulled in asynchonously. — Eric Alexander, Dec 19 '13 at 22:21

score 3 · Answer 1 · answered May 29 '15 at 08:43

On a SharePoint Web Part Page if you want to ensure that your JavaScript runs after everything is loaded then you can use one of the following SharePoint methods:

ExecuteOrDelayUntilScriptLoaded(myFunction, "sp.js");
// or
_spBodyOnLoadFunctionNames.push("myFunction");

The first one as the name suggests runs your function after a specific JS is loaded, so in this case it sounds like you need to use _spBodyOnLoadFunctionNames instead which will ensure that all web parts are loaded, however what it won't wait for is that any specific AJAX asynchronous content is loaded, you may need to write your own logic in your function looking for an event or DOM element change specific to the actual webparts.

score 0 · Answer 2 · answered Mar 25 '15 at 08:47

I've had some success using the LiveQuery jQuery plugin in the past:

https://github.com/hazzik/livequery/

It's a little out of date now, so there may be a more current method. Basically, this binds to elements that may not have appeared yet, and then executes a callback when an instance of the element arrives. So you could have:

$(document).ready(function(){

   $("a.mylinks").livequery(addAttributeFunction);

});

Which would run "addAttributeFunction" whenever a link arrived with class "myLinks".

score 0 · Answer 3 · edited Apr 13 '17 at 12:41

i was able to achieve something similar in a page populated with several instances of Content by search webparts with display templates: i had to append parameters to all document links (both in and outside the webparts)

first using $(document).ready didn't seem to work at all so i used $(function) to replace all links outside of the webparts cfr. http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/

then the replacement function is called again from within the display templates OnPostRender so that their content is processed asynchronously

based on first answer here: Run any other javascript after the Display Templates have rendered the content

score 0 · Answer 4 · edited Mar 25 '15 at 08:50

0

When I insert jquery on a page I often use $('#IDofContainerWithLinksInIt').ready() to execute whatever code I want to use to manipulate content on the page. It doesn't have to be the direct parent of what you want to change, but it should be an ancestor that is created on the same async call.

edited Mar 25 '15 at 08:50

Robert Lindgren

24,520
12
53
79

answered Dec 19 '13 at 21:55

Blue Murphy

635
4
9

jQuery wait until the page (with several webparts and Ajax controls) loaded

4 Answers4