Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am new to SharePoint, currently i am learning sharepoint2013, here i don't know,how to add jquery library in master page. Before that I did all steps from the following site http://blogs.msdn.com/b/yojoshi/archive/2010/06/17/using-jquery-with-sharepoint-2010.aspx, but it doesn't working(Jquery not loaded)..

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

and my script in master page is

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

and i tried with node 15 (and for the info, I can't find any node namely 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 doubt, which is the default master page for sharepoint 2013? why I am asking this question is, may be I included jquery in wrong master page that's might lead this problem. and I used the v4.master enter image description here

share|improve this question
    
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. –  Cameron Verhelst Mar 3 at 9:22
    
Yes, JQuery is not loaded in my site... –  VINO Mar 3 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 –  Robert Lindgren Mar 3 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 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 at 15:30

5 Answers 5

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

share|improve this answer
1  
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. –  Daniel Ziga Apr 10 at 9:02
1  
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 at 18:08

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.

share|improve this answer
1  
Awesomeness! :D –  Robert Lindgren Mar 3 at 9:41
    
Duh, good catch :). –  Cameron Verhelst Mar 3 at 9:46
    
sorry, still those .js scripts files are not loaded... –  VINO Mar 3 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 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 at 4:24

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! :)

share|improve this answer

Try

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

2.Try removing "/"

share|improve this answer
1  
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 at 15:29
up vote 0 down vote accepted

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

share|improve this answer
    
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 –  Robert Lindgren Apr 10 at 5:24
1  
post edited.... –  VINO Apr 10 at 8:41
1  
Just so you know, with your solution when you do an update to SharePoint you will probably lose your changes. –  Hugh Wood Jun 6 at 18:10
    
link is broken in original answer –  danieldekay Aug 6 at 16:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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