How to include jQuery in SharePoint

In this SharePoint tutorial, we will discuss how to include jQuery in SharePoint. We will see how to reference jquery in sharepoint 2013/2016/2019 or SharePoint Online.

I will show you how to give reference jquery in SharePoint 2013 master page easily using a few lines of tag.

Lots of time while coding we required jQuery in the SharePoint page, so we need to how to reference jquery in SharePoint Online or SharePoint 2013/2016.

We will check how to deploy jQuery files to SharePoint using a solution package in SharePoint 2013/2016. And, we will see how to give jquery reference using a content editor web part or script editor web part in SharePoint 2013 or SharePoint 2016 or SharePoint Online. Also, we will see how to give jQuery references in SharePoint master page or in application page.

We will also see how add jQuery reference using visual web part in SharePoint using visual studio.

Add jQuery SharePoint Online

Now, we will see how to add or include jquery in SharePoint Online.

We can include jQuery by using a script editor web part in SharePoint Online.

There are two ways we can give jQuery reference in a SharePoint Online web part page.

We can give the jQuery reference from a CDN directly like below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Or you can download the jQuery file and save it in a SharePoint site assets library and we can give reference from there.

<script type="text/javascript" src="https://tsinfo.sharepoint.com/sites/TSInfoClassic/SiteAssets//jquery.min.js"></script>

Once you have Saved the jQuery file, you can open any web part page and then click on Add a web part and then select the script editor web part from the Media and Content category.

Once the script editor web part added to the page, you can click on EDIT SNIPPET and add the code like below:

This is the easiest way to include jquery in SharePoint Online Office 365.

Reference jquery in SharePoint 2013 master page

Now, we will see how to give reference jquery in SharePoint 2013 master page or how to give jQuery reference in SharePoint Online master page.

Let us see 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.

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.

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="http://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 on 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”/>
</asp:Content>

The jQuery will be available to the application page.

Add jQuery in a visual web part in SharePoint 2010/2013/2016

Now we will see, how to give jQuery reference in a visual web part in SharePoint 2010/2013/2016.

Add jQuery in a visual web part in SharePoint

Follow the below steps to add jQuery in a visual web part in SharePoint. The screenshots are from visual studio 2010, but it will work the same way in SharePoint 2013/2016.

Note: I have done the example in SharePoint 2010 with visual studio 2010, but the same way, we can develop visual web part in SharePoint 2013/2016 using visual studio 2015/2017/2019.

Step-1:
Open Visual Studio 2010, Click on File -> New project. Then from the New Project dialog box, select Visual C# -> SharePoint -> 2010.

Then from the list of SharePoint 2010, project templates select the Empty SharePoint Project. Give a name and make sure .net Framework 3.5 is selected as shown in the figure below:

Step-2:
In the next step Give a local site for debugging and Select Deploy as a farm solution and click on Finish as shown in the figure below:

Step-3:
Now Right-click on the project -> Add -> New Item

Then from the list of installed templates Select Visual Web Part, Give a name and click on Add as shown in the figure below:

Step-4:
Now open the .ascx file and add the following script:

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

After that deploy the web part. The jQuery will be available to those pages where you will add the visual web part in SharePoint 2010 or SharePoint 2013/2016.

Reference jQuery in SharePoint page using a Content Editor web part

Now, we will see how to call jQuery into a SharePoint page using the content editor web part. How to add JavaScript in a content editor web part in SharePoint.

There are different ways you can call jQuery libraries to SharePoint page like:

• By using a Content Editor web part
• By using custom actions
• By dynamically through code
• By adding the script to the master page etc.

This is one of the simplest approaches, But jQuery will be available on the same page where the Content Editor web part is added, it will not affect any other pages. This can be used in a Sandboxed environment.

Call jQuery through content editor web part in SharePoint

Follow below steps to call jQuery through content editor web part in SharePoint.

The same way, we can add jQuery to SharePoint Online using content editor web part or by using a script editor web part.

The below screen I have added from a SharePoint 2010 site.

Step-1:
First, edit the page on which you want to call the jQuery libraries. Then on one of the webpart zone click on Add a Web Part.

Step-2:
Then from the Media and Content category section select Content Editor web part and click on Add as shown in the figure below.

Step-3:
Then in the content editor web part Click on “Click here to add new content” to edit the contents of the web part.

Step-4:
In the Ribbon, go to the Format Text section, select HTML in the Markup group, and choose HTML Source as shown in the figure:

Step-5:
Now in the edit HTML source dialog box paste the below line:

<script type="text/javascript" src="http://siteurl/_layouts/jquery/jquery-1.6.2.min.js"></script>

Step-6:
Now Save and Publish the page.

After this step, the jQuery will be available to the SharePoint page.

Reference jquery in sharepoint 2013 using content editor web part

Now, we will see how to insert JavaScript code in Content Editor WebPart in SharePoint.

First, open a notepad and write the JavaScript code. Here I have used simple code to write Hello World as below.

<script language="JavaScript">
document.write('Hello World !!!');
</script>

Now Save the file with a name(Here name is MyJavaScript.txt). Now we can put the text file in the Site Assets Library and also we can put the code in the layouts folder.

Copy the text file and put it inside the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\STYLES folder.

Open the page where you want to add Content Editor Web Part and edit the page. After that in the edit mode click on Add web part and from the Ribbon select the Media and Content web part category and select Content Editor web part and then click on Add.

Now go to the Content Editor web part properties. From the properties select Content Link and give the path of the text file that contains the JavaScript code. Since we have saved the file in the layouts folder the path will look like:

http://[Server Name]/_layouts/Styles/MyJavaScript.txt

Click on OK.

Then Save and Close the page, now our JavaScript code will appear.

The same way, we can use the jQuery and JavaScript code using a script editor web part in SharePoint 2013/2016/2019 or SharePoint Online.

Deploy jQuery files to SharePoint using Solution Package

Now, we will see how to deploy jQuery to SharePoint 2010/2013/2016 using a solution package. The advantage of deploying to the filesystem is that the jQuery library will be available throughout your whole SharePoint environment.

The same way we can deploy jQuery files to SharePoint 2010/2013/2016 also.

Deploy jQuery to SharePoint using solution package

There are different options available for deploying jQuery to SharePoint. One approach is using a solution package (.wsp) file.

Once you deploy jQuery to SharePoint, then you can write like below to call jQuery in web parts.

<script type="text/javascript" src="http://siteurl/_layouts/jquery/jquery-1.6.2.min.js"></script>

Follow below steps to make the WSP that will deploy the jQuery files to the server:

Step-1:
Open Visual Studio 2010/2015/2017 then Go to File -> New Project.

Step-2:
Then Select SharePoint -> 2010 and then Select Empty SharePoint project and give a name, and also make sure .Net framework 3.5 has been selected as shown in the figure below:

Step-3:
In the next step, give the local deployment site URL and choose to Deploy as Farm Solution since we are going to deploy files to the Layouts folder. Ref figure below:

Step-4:
Now Right-click on the project and select Add -> SharePoint “Layouts” Mapped Folder as shown in the figure below.

Step-5:
After step-4, SharePoint will add the Layouts folder as well as another folder with the same name as the project. The reason it adds the extra folder is to try to keep the Layouts folder tidy as well as making sure you are not overwriting existing files when you deploy your solution.

Now copy your jQuery files to that folder as shown in the figure below:

Step-6:
This finishes our task. Now right click on the solution explorer click on deploy. Once the deployment is over.

Navigate to the layouts folder, the jQuery files should present in the below location:
C:\Program Files\Common Files\Microsoft Shared\Web Server
Extensions\14\TEMPLATE\LAYOUTS\DeployjQueryFiles\jquery-1.6.2.min.js

You may like the following SharePoint tutorials:

• How to Change SharePoint Site Logo + PowerShell
• How to Change favicon in SharePoint Online/2013/2016
• Run JavaScript after page loaded completely using jQuery
• Show SharePoint List Data using jQuery Datatable
• Show paging at top in list view web part in SharePoint 2013/2016/Online using jQuery
• Create a Custom Calendar in SharePoint using Rest API and jQuery
• SharePoint Online redirect to another page programmatically
• tabulator js tutorial

In this tutorial, we learned include jquery in sharepoint and also:

• Reference jquery in SharePoint 2013 master page
• JQuery reference in Application pages in SharePoint
• Reference jQuery in SharePoint page using a Content Editor web part
• Deploy jQuery files to SharePoint using Solution Package in SharePoint