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!

Answer 1

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.

Answer 2

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

Answer 3

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!

Answer 4

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();
    };
}

Answer 5

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).