Call jQuery to SharePoint page using a Content Editor web part

This SharePoint 2010 tutorial, we will discuss how to call jQuery into a SharePoint page using the content editor web part. In one of my previous article, I have explained about how to deploy jQuery to SharePoint using solution package. After you deploy jQuery to SharePoint, it is time to call jQuery to a SharePoint page.

We will also see here, 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.

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.

add jquery in sharepoint page

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:

Call jQuery to SharePoint page using a Content Editor web part

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.

Insert JavaScript in SharePoint using Content Editor WebPart

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.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

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 SharePointSky.com

>