SharePoint 2013 Execute Javascript function after MDS load

SharePoint 2013 introduces a performance improvement to increase the page load response time called Minimal Download Strategy (MDS). It is a feature that by default is activated in the team site. The MDS is performed by functions inside javascript file called start.js. This blog explains the flow of a MDS call.

So it is a bit tricky to execute a javascript function to modify the DOM after the MDS finish as a normal jQuery’s document.ready function or _spBodyOnLoadFunctionNames are executed before the MDS script finishes.

Inside the start.js file there is an object called asyncDeltaManager that perform most of the async page loading. After several times code stepping in a javascript debugger, I could see what is going on under the hood, at the end the process a function called _scriptsLoadComplete is called and inside it, a function called _endRequest is called. And in the _endRequest function there is a routine to iterate a eventHandlerList called endRequest. So there is a event handler that we can hook our function into the asyncDeltaManager pipeline. Shortly, below code shows how to perform this task.

$(function () {
      ExecuteOrDelayUntilScriptLoaded(function () {
          if (typeof asyncDeltaManager != "undefined")
            asyncDeltaManager.add_endRequest(setFullScreenMode);
          else setFullScreenMode();
      }, "start.js");

  });

function setFullScreenMode() {
     SetFullScreenMode(true);
     $('#siteactiontd').hide();
     PreventDefaultNavigation();
     $('#fullscreenmodebox').hide();
     return false;
}

In the code above the function setFullScreenMode will set the page in full screen mode and hide the siteaction and the full screen button. This code need to be executed after the MDS finishes. I hooked this function inside the jQuery load to the MDS script pipeline asyncDeltaManager.add_endRequest to make sure that the function executed after everything is loaded.

8 thoughts on “SharePoint 2013 Execute Javascript function after MDS load

  1. Oh, when I just put your code in a js file and loaded it from the master, I get:
    ‘$’ is undefined
    myscriptfile.js, line 1 character 1

    Any idea as to why?
    Regards
    // Thomas

    Daniel Laksana Reply:

    Hi, it is jQuery function, you need to have a jquery reference in your master page, or you can use _spBodyOnLoadFunctionNames instead, as below:
    _spBodyOnLoadFunctionNames(‘myinit’);

    function myinit(){
    ExecuteOrDelayUntilScriptLoaded(function () {
    if (typeof asyncDeltaManager != “undefined”)
    asyncDeltaManager.add_endRequest(myAnotherFunction);
    else myAnotherFunction();
    }, “start.js”);
    }

  2. Pingback: Revised A guide to quick SharePoint 2013 branding – part 2 – with Javascript | blksthl

  3. What are the advantages of doing it this way versus using the built-in SP.SOD functions?

    Daniel Laksana Reply:

    SP.SOD should be the first preference but I noticed when MDS feature is activated, the SP.SOD functions are executed too early.

  4. Pingback: SharePoint 2013: Recopilatorio de enlaces interesantes (XV)! - Blog de Juan Carlos González en Geeks.MS

  5. Pingback: SharePoint 2013: Recopilatorio de enlaces interesantes (XV)! | Pasión por la tecnología...

  6. Not sure why this is not working for me.

    $(function () {
    ExecuteOrDelayUntilScriptLoaded(function () {
    if (typeof asyncDeltaManager != “undefined”)
    asyncDeltaManager.add_endRequest(ColorCode);
    else ColorCode();
    }, “start.js”);
    });

    function ColorCode() {
    alert(“Hello World”);
    return false;
    };