SharePoint custom JavaScript and jQuery blocked by MDS Minimal Download Strategy

Question

Here's my setup. Onprem SharePoint 2016. I have a master page which is basically a copy of seattle.master and I want to add jQuery and a custom Javascript to manipulate the DOM. The minimal download strategy blocks my code. I read numerous posts but I just cannot figure it out of the life of me. I know I can turn off the MDS feature but I don't want to resort to that.

What I want is to simply change the word "Sites" from the suite links bar to "My Sites". Very simple DOM operation.

$('a#Sites_BrandBar span').text('My Sites'); So this is the code that should do it. It works when MDS feature is turned off.

Here's what I've done

In the section I have the following

<SharePoint:ScriptLink language="javascript" name="/~layouts/MyFeature.SP2016.Branding/scripts/jquery-3.1.1.min.js" LoadAfterUI="true" runat="server" Localizable="false" OnDemand="false" />
<SharePoint:ScriptLink language="javascript" name="/~layouts/MyFeature.SP2016.Branding/scripts/myscript.js" LoadAfterUI="true" runat="server" Localizable="false" OnDemand="false"  />

As per some of the articles I read including this one you have to wrap the entire javascript.

So my myscript.js looks like this

function $_global_changeText() {
    $('a#Sites_BrandBar span').text('My Sites');
}
$_global_changeText();

and the jQuery library has a wrapper around it as well.

function $_global_jquery() {

 <original jQuery library here...>

}
$_global_jquery();

That's all.

when I look at the scripts that are loaded via the developer toolbar I don't even see my scripts in there.

When am I doing wrong? A sample master page with a sample javascript file would be much appreciated! Help please and thank you!

Answer 1

Try with this:

1. Add a reference to the JS file in the master page (notice the URL to the file):

   <SharePoint:ScriptLink Language="javascript" Name="/_Layouts/15/MyFeature.SP2016.Branding/scripts/myscript.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false" ID="ScriptLink2" />

2. At the bottom of the master page register your startup function to be called when the files are loaded:

   _spBodyOnLoadFunctionNames.push("$_global_changeText");

My additional advice.Don't call jQuery using $, in some pages it will conflict with SharePoint use of the $ variable. You can either use jQuery or create a JS module for your custom code:

(function ($) {
    // ... all vars and functions are in this scope only
    // still maintains access to all globals
    // It is safe to use $ here
}(jQuery));

-Hope it helps