3

I'm new to Sharepoint and I've a problem trying to add Jquery and Bootstrap references to a MasterPage. Just created a new master page (copied seatle.master to seatle2.master) and wanted to add:

<script src="/_catalogs/masterpage/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="/_catalogs/masterpage/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/_catalogs/masterpage/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
<script src="_catalogs/masterpage/js/bootstrap.min.js"></script>

I've downloaded Jquery and Bootstrap into my server (testing server) and i'm using Sharepoint Designer to edit both Masterpage and site page.

My goal is to be able to create stuff with bootstrap and JQuery directly into the page (without using the Script Editor).

How and where should I insert the references in my Masterpage? Thanks

1
  • which version of SharePoint is? Aug 3, 2015 at 17:11

4 Answers 4

2

There are several ways to load jQuery and other resources. If you want to load them directly in your custom master page, there are also several places within the page to do so. Personally, I load them right under the CustomJSUrl line, like so:

enter image description here

This way, they get loaded before any page content, but AFTER the vanilla SharePoint scripts.

0

You could upload Bootstrap and JQuery files to a document library in SharePoint and use the Script Manager to load them on the masterpage.

<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
    <Scripts>
        <asp:ScriptReference Path="<%$SPUrl:~SiteCollection/YourDocLib/jquery.min.js%>"></asp:ScriptReference>
    </Scripts> 
</asp:ScriptManager>
0

Assuming it is SharePoint-Server and and you are changing the Master Page you can do this

Style Sheets can be referred in Master Page by adding CssLink control in header section of Master Page. Find below the sample for adding Style Sheet reference directly in Master Page. Add the below code inside the head tag of Master Page.

<SharePoint:CssRegistration  ID="CssRegistration1" Name="<% $SPUrl:~SiteCollection/_layouts/15/SFS.Ashok.Refer/Styles/sitecol-master.css%>" runat="server" After="corev15.css" />
<SharePoint:CssRegistration  ID="CssRegistration2" Name="<% $SPUrl:~Site/_layouts/15/SFS.Ashok.Refer/Styles/site-master.css%>" runat="server" After="corev15.css" />

Referring JavaScript is fairly strait forward in Visual Web Part. The Script Link is the best option to go for. The below is the code snippet to refer script in Visual Web Part.

<sharepoint:scriptlink runat="server" name="~SiteCollection/_layouts/15/SFS.Ashok.Refer/Scripts/sitecol-visualwp.js" > </sharepoint:scriptlink>
<sharepoint:scriptlink runat="server" name="~Site/_layouts/15/SFS.Ashok.Refer/Scripts/site-visualwp.js" > </sharepoint:scriptlink>

more information here

2
  • thank you all. I think i've solved it after reading all your sugestions. Just used a copy of the seatle.html and created a new master page using Desing Manager and Sharepoint Desiger, added the code for the bootstrap and jquery references as you told and applied the master page to the site. Now i can use bootstrap wen editing the page without adding script editor. Once again, Thanks Aug 6, 2015 at 8:25
  • Great!, please qualifies the answer correct :) Aug 6, 2015 at 13:35
0

Use the following code to add the jQuery and Bootstrap reference:

<SharePoint:ScriptLink ID="ScriptLink7" language="javascript" name="~SiteCollection/Style Library/Style/js/jquery-1.10.2.min.js" runat="server" />
<SharePoint:Scriptlink ID="Scriptlink140" runat="server" name="~SiteCollection/Style Library/Responsive Style/js/bootstrap.js" language="javscript" />
<SharePoint:Scriptlink ID="Scriptlink160" runat="server" name="~SiteCollection/Style Library/Responsive Style/js/bootstrap.min.js" language="javscript" />
<SharePoint:Scriptlink ID="Scriptlink180" runat="server" name="~SiteCollection/Style Library/Responsive Style/js/CustomJS.js" language="javscript" />

Add these below the

<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />

This worked for me when I had to achieve a similar functionality.

Your Answer

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

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