14

I am new to SharePoint; currently i am learning SharePoint 2013. I don't know how to add JQuery library in a master page. I did all steps from this site, but it doesn't work (Jquery not loaded).

My script files' location is C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\CustomScript

and my script in master page is

I tried with node 15 (and I can't find any node named like 15 inside that layout folder).

<SharePoint:ScriptLink language="javascript" name="/_Layouts/15/CustomScript/jquery-1.10.2.min.js" runat="server"/>
<SharePoint:ScriptLink language="javascript" name="/_Layouts/15/CustomScript/jquery.SPServices-2013.01.min.js" runat="server"/>
<SharePoint:ScriptLink language="javascript" name="/_Layouts/15/CustomScript/SPCascade.1.1.1.min.js" runat="server"/>

And I have another question: which is the default master page for SharePoint 2013? Maybe I included the JQuery in the wrong master page. That might lead to this problem. I used the v4.master

enter image description here

5
  • What's isn't working ? You're JQuery isn't loaded ? I don't believe there's a difference for this between 2013 and 2010 so it may be something different. Mar 3, 2014 at 9:22
  • Yes, JQuery is not loaded in my site...
    – VINO
    Mar 3, 2014 at 9:29
  • There should be no 15-node in the Layouts folder (the Layoutsfolder though is a subfolder of 15 in 2013, hence you need /15/ in the URL Mar 3, 2014 at 10:05
  • Yes... i tried with this location /_Layouts/15/CustomScript/jquery-1.10.2.min.js but still it doesn't loaded.
    – VINO
    Mar 3, 2014 at 10:07
  • Use token references and don't include multiple periods and remove all dashes from js files. Min files in SharePoint are .js non min are debug.js
    – Hugh Wood
    Mar 3, 2014 at 15:30

6 Answers 6

18

Preparing your JS files for SP2013:

Modify JQuery and all additional libraries to be in the SharePoint namespace

To add a file into a namepsace surround it with this code:

// Example for JQuery, replace jquery with your library name
function $_global_jquery() {
     // Library code goes here
}
$_global_jquery();

This will ensure correct On Demand loading and it won't break the MDS feature.

Normally for optimisation you would combine JS files, however in SP2013 it is best to keep them separate and load when required (i.e. on demand)

Adding to your choice of master page:

Add into the masterpage the GLOBAL scripts, local scripts should be in the components themselves and script linked using script manager. (Code side)

<!-- Master page addition -->
<SharePoint:ScriptLink language="javascript" name="~sitecollection/assets/js/jquery.js" runat="server" OnDemand="False" LoadAfterUI="True" />

Make sure to remove all dashes and extra dots from the script name, as this can conflict

As you can see, JQuery here is set to load with the page and after the UI, we are pointing it to an assets folder in the site collection, which houses JS, but in reality this depends on your design.

If you are using on demand then set to false and omit the LoadAfterUI tag.

You should now have a fully registered JQuery library, initialise this from anther js file that is loaded in sequence AFTER your JQuery library.

NEVER embed JS into the page as best practice, and if you do make sure you do not include JS code on the same line as the tag as this can also break page rendering controls in 2013.

<script> (function(){ alert("This is bad practice!"); })(); </script>

<script>
    (function(){ alert("This is acceptable but still not good practice!"); })();
</script>

From http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html a list of the valid token references to use

  • ~site – reference to the current SharePoint site (or “Web”)
  • ~sitecollection – reference to the current SharePoint site collection (or “Site”)
  • ~layouts – version specific reference to the web application Layouts folder (so it will automatically swap out /_layouts/14 or /_layouts/15 for you)
  • ~sitecollectionlayouts – reference to the layouts folder in the current site collection (e.g. /sites/team/_layouts/15)
  • ~sitelayouts – reference to the layouts folder in the current site (e.g. /sites/teams/subsite/_layouts/15)

Minification:

Minified files are filename.js non minified version are filename.debug.js. No dashes no other multiple periods in the name.

Default Master Pages:

Really you should be using the design manager to create you a master page (In site settings!)

Default master page layouts however are oslo and seattle.

New ones are also on the way

2
  • 4
    Love your answer. Just another best-practice tip: Instead of putting the link to the javascript directly in the masterpage, create a usercontrol which has the link to the javascript files and make user it gets loaded into the AdditionalPageHead delegate control. This way you can load the javascript files into ANY SharePoint masterpage without having to modify the masterpages. Create a feature which loads the usercontrol into the delegate control and you now have 100% full control over whenever the files should get loaded.
    – user2536
    Apr 10, 2014 at 9:02
  • 2
    You can also call scriptlink / scriptblock from a custom action, which is my preferred choice of adding to the page, much less code than a delegate control. Although a delegate control does give you more control with the scriptmanager
    – Hugh Wood
    Jun 6, 2014 at 18:08
5

If you're following that tutorial, remember that in SharePoint 2013 the LAYOUTS directory has a /15/ node.

So in SP2010, the path might have been /_layouts/awesomeness/jquery.js but that exact same path in SharePoint 2013 might be /_layouts/15/awesomeness/jquery.js.

5
  • 2
    Awesomeness! :D Mar 3, 2014 at 9:41
  • Duh, good catch :). Mar 3, 2014 at 9:46
  • sorry, still those .js scripts files are not loaded...
    – VINO
    Mar 3, 2014 at 10:04
  • 1
    ~sitecollectionlayouts is the correct way for this, check out Martin Hatch for more martinhatch.com/2013/08/…
    – Hugh Wood
    Mar 3, 2014 at 15:01
  • I followed this one, sharepoint.stackexchange.com/questions/78025/… but when write alert command inside a new list of a cutstom list page it shows Web Part Error: Unknown server tag. Correlation ID: 1e6e859c-0ccd-60ab-2e10-29e0004004f6. my code: <SharePoint:ScriptBlock> alert(Hai); </SharePoint:ScriptBlock> its not working....
    – VINO
    Apr 9, 2014 at 4:24
3

In addition, it might be suggested to avoid registering jQuery within master page. There are at least 6 different master pages in SharePoint: default for site, system one, blog site has it's own master page, search and enterprise search centers plus, finally, my sites. Besides, you cannot easily "unregister" jQuery or other script as it is "hardcoded" in the master page

Don't know why people kee suggesting this way.

What might be recommended instead, is using custom feature plus CustomAction. Fr instance, here we are: http://blog.voyta.net/2010/09/12/referencing-javascript-files-using-customaction-in-sharepoint-2010-sandboxed-solutions/ http://weblogs.asp.net/jan/archive/2010/03/01/scriptsrc-referencing-javascript-files-with-sharepoint-2010-custom-actions.aspx

This is a good way; you still able to turn off or on JavaScript registration (gor example to "upgrade" to the new version), add additional files after your jQuery registration (for .noConflict() call, for instance) and you needn't any master page modification at all - it works with any master page on the site.

Bingo! :)

0

Try

1.Remove OnDemand="True" tag from core.js

2.Try removing "/"

1
  • 3
    These examples aren't good practice. Please see above on how to use token references and OnDemand for script linked filed.
    – Hugh Wood
    Mar 3, 2014 at 15:29
0

Finally I got answer from this one http://sharepointkids.blogspot.in/2014/04/two-level-cascading-drop-down-in.html

I have just added my js cdn to the seattle.master

if we want to use our own js file mean we have two options, one is *.js should inserted to custom library and then write the script link on seattle.master or else we have copy to this location C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033 then add

<SharePoint:ScriptLink language="javascript" name="(name only not full path)*.js" runat="server"/>

I think this image tells the whole story

4
  • 1
    Can you please extend your answer with what you think the solution was? That way your answer will be helpful even if that link breaks Apr 10, 2014 at 5:24
  • 1
    post edited....
    – VINO
    Apr 10, 2014 at 8:41
  • 2
    Just so you know, with your solution when you do an update to SharePoint you will probably lose your changes.
    – Hugh Wood
    Jun 6, 2014 at 18:10
  • 1
    link is broken in original answer Aug 6, 2014 at 16:34
0

In addition to the other answers:

Don't use the $ alias. Sadly SharePoint overwrites it at least in the /_layouts/15/assetpickers.js.

function $() {
    a: ;for (var c = [], b = 0; b < arguments.length; b++) {
        var a = arguments[b];
        if (typeof a == "string")
            a = document.getElementById(a);
        if (arguments.length == 1)
            return a;
        c.push(a)
    }
    return c
}

Use the jQuery alias or create your own via var yourNameSpace = jQuery.noConflict().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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