2

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!

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.