SharePoint 2013 add javascript after whole page load

Question

Disclaimer: I have no experience with SharePoint2013.

I have problem - I must include/fire some javascript functions after the whole page has been loaded. I tried listening to DOMDocumentReady and window.load events, but sharepoint render the rest of page after those events.

My question is: what I should do to be able to run script after whole page with ajax is rendered. Also I noticed that page navigation is based on hash (#) part. Obviously I must detect that moment also.

Any help or even link to right page in documentation would be great!

Are you using jQuery to fire your ajax requests or is it some SharePoint special case? — Bloafer, Jun 05 '13 at 09:29
I must integrate 3rd party commercial library, which expects that at moment it loads, all html is present. I wont be making any ajax requests on start. Also I must attach event listeners on some links, etc. — Kamil Biela, Jun 05 '13 at 09:46
Not sure If I understand You - but what ajax requests? Currently the script is included as — Kamil Biela, Jun 05 '13 at 09:51
`what I should do to be able to run script after whole page with ajax is rendered.` what are you using to make the Ajax requests? — Bloafer, Jun 05 '13 at 09:54
I mean the sharepoint 2013 default ajax that loads rest of the page. Those calls are not mine, it's default behavior of SharePoint2013. — Kamil Biela, Jun 05 '13 at 10:21

score 58 · Accepted Answer · answered Jun 26 '13 at 17:11

You are right, MANY things happen on page after $(document).ready(). 2013 does provide a few options.

1) Script on Demand: (load a js file then execute my code.)

function stuffThatRequiresSP_JS(){
    //your code
}

SP.SOD.executeFunc("sp.js")

2) Delay until loaded (wait for a js file, then run)

function stuffToRunAfterSP_JS(){
    //your code
}
ExecuteOrDelayUntilScriptLoaded(stuffToRunAfterSP_JS, "sp.js")

3) load after other stuff finishes

function runAfterEverythingElse(){
    // your code
}
_spBodyOnLoadFunctionNames.push("runAfterEverythingElse");

Sources:

executeFunc: http://msdn.microsoft.com/en-us/library/ff409592(v=office.14).aspx

ExecuteOrDelayUntilScriptLoaded: http://msdn.microsoft.com/en-us/library/ff411788(v=office.14).aspx

Cant find a source on _spBodyOnLoadFunctionNames but I am using it in a few places.

good luck.

thanks for answer, wish You were here earlier ;) - if someone is interested, sP2013 also emits "FakeEvents" on body element. Those events are different in every browser, but just ctrl+f in sp.start.js something like Fakeevent function. (don't remember exactly now, but it should be something like that). and also note, the search page of SP2013 is loaded after all those events ;). So for main page is ok to listen to those events, but for search page not. — Kamil Biela, Sep 30 '13 at 09:47
_spBodyOnLoadFunctionNames did not work for me but SP.SOD.executeOrDelayUntilEventNotified did run ... any idea why ? — Jean-Philippe Martin, Nov 27 '19 at 14:47

score 13 · Answer 2 · answered May 20 '14 at 15:25

A documented event registration function that is roughly equivalent of _spBodyOnLoadFunctionNames is SP.SOD.executeOrDelayUntilEventNotified. Call this to receive notification of the "sp.bodyloaded" event:

SP.SOD.executeOrDelayUntilEventNotified(function () {
    // executed when SP load completes
}, "sp.bodyloaded");

This handler actually fires slightly before the _spBodyOnLoadFunctionNames functions.

This reference is for SharePoint 2010, but the SOD utility is present in SharePoint 2013: http://msdn.microsoft.com/en-us/library/office/ff410354(v=office.14).aspx

José Quinto Zamora · Answer 3 · 2017-03-02T07:37:39.537

There are different techniques used to provided our custom JavaScript code loaded before / in the middle / after OnLoad events in SharePoint:

ExecuteOrDelayUntilBodyLoaded.
Sys.Application.pageLoad.
document.ready Jquery.
_spBodyOnLoadFunctionNames.
_spBodyOnLoadFunction.
ExecuteOrDelayUntilScriptLoaded:sp.core.js.
SP.SOD.executeFunc: sp.js.
Sys.WebForms.PageRequestManager.PageLoaded

– ExecuteOrDelayUntilBodyLoaded function is always executed the first (but at this stage we can not access to SP methods). This could be usefull to execute our custom code at really earlier stage in the OnLoad process.

– There are two SharePoint onLoad functions _spBodyOnLoadFunctionNames and _spBodyOnLoadFunction. Always executed in the order. SO, if we want to execute some code after all functions included by us (or other devs) in _spBodyOnLoadFunctionNames, then is useful to use this one _spBodyOnLoadFunction, because is executed the last.

– ExecuteOrDelayUntilScriptLoaded:sp.core.js and SP.SOD.executeFunc: sp.js. are swapping the order of execution in a random way.

– If we want to execute some functions after all functions (SP, after load functions, Yammer, etc.) we can use this function to attach the OnLoad event –> Sys.WebForms.PageRequestManager.PageLoaded.

You can see the whole article explaining each type, pros and cons here: https://blog.josequinto.com/2015/06/16/custom-javascript-function-loaded-after-the-ui-has-loaded-in-sharepoint-2013/

Regards!

score 2 · Answer 4 · answered Jun 10 '15 at 08:33

https://mhusseini.wordpress.com/2012/05/18/handle-clicks-on-calendar-items-in-sharepoint-2010-with-javascript/

The above link worked for me. He basically uses the ExecuteOrDelayUntilScriptLoaded to launch his calendar hook code after the SP.UI.ApplicationPages.Calendar.js loads.

Then, in the calendar hook he attaches his own function to the: SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed function.

 _spBodyOnLoadFunctionNames.push("LaunchColorCodeCalendarScriptOnReady");


function LaunchColorCodeCalendarScriptOnReady() {


    ExecuteOrDelayUntilScriptLoaded(
        MyCalendarHook,
        "SP.UI.ApplicationPages.Calendar.js");


}

function MyCalendarHook() {
    var _patchCalendar = function () {
        //Do something to the items in the calendar here
        //ColorCodeCalendar();
    };

    var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;
    SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function ($p0, $p1) {
        _onItemsSucceed.call(this, $p0, $p1);
        _patchCalendar();
    };
}

Exactly what I was looking for my Calendar modification. – cubanGuy Feb 26 '19 at 14:30 — cubanGuy, Feb 26 '19 at 14:30

score 0 · Answer 5 · answered Dec 08 '16 at 10:17

Here is nice article how to use the built-in SharePoint SOD (Script On Demand) functionality: http://www.ilovesharepoint.com/search/label/SOD

It works ok both for SP 2010 and 2013.

The idea of on demand script loading make really sense. SharePoint 2010 loads really a lot of JavaScripts - this takes time! So the idea is: first load the HTML and let it render by the browser so that the user is able to read the requested information as fast as possible. And in the second step load the behavior (the JavaScripts).

SharePoint 2013 add javascript after whole page load

5 Answers5

Linked