Give jQuery Reference in SharePoint master page or in Application Page

This SharePoint tutorial explains how to give reference to the jQuery file in the SharePoint 2013/2010 master page or application page.

Lots of time you may require to refer jQuery file references in SharePoint 2010/2013 page. In this case, we can add the jQuery file reference inside the master page in SharePoint 2010/2013.

Also, we will discuss how we can give JQuery reference in Application pages in SharePoint 2010/2013.

Also, I have explained how to deploy jQuery to SharePoint using solution package and how to deploy to site assets library using SharePoint solution package.

Reference jQuery in SharePoint master page

To call jQuery through the master page, we should have permission to edit master pages. This is one of the simplest and direct approaches. But we have to update on each master page we want to include jQuery.

Follow below steps:

Open the SharePoint 2013/2016 master page using SharePoint designer 2010 (for SharePoint 2010 sites and for SharePoint 2013 site, open with SharePoint designer 2013) which you want to add, in the head section add the script below:

<SharePoint:ScriptLink language="javascript" name="jQuery/jquery-1.6.2.min.js" Defer="false" runat="server"/>

Apart from using ScriptLink we can also directly call using Script tag like below:

<script type="text/javascript" src="https://siteURL/_layouts/jQuery/jquery-1.6.2.min.js"></script>

In the ScriptLink tag the name attribute is the is a relative path to jQuery in the Layouts folder.

JQuery reference in Application pages in SharePoint

To give script reference is application page is similar to giving reference in master page technique.

There are different placeholders present in the master page and when you create an application page, you have the ability to add content into the content placeholders that the master page exposes.

Here we will see how we can add content to PlaceHolderAdditionalPageHead placeholder present on the master page.

Write the below code in the application page:

<asp:Content ID=”PageHead” ContentPlaceHolderID= “PlaceHolderAdditionalPageHead” runat=”server”>
<SharePoint:ScriptLink language=”javascript” name=”jQuery/jquery-min-1.6.js” Defer=”false” runat=”server”/>

The jQuery will be available to the application page.

You may like following SharePoint master page tutorials:

The advantages of using ScriptLink method is you can asynchronously run as well as an option to defer loading until the page is ready.

I hope this SharePoint tutorial helps to give jQuery reference in SharePoint 2010/2013 master page and in application pages in SharePoint.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site