jQuery in SharePoint 2013/2016/Online

Well, I am going to post an article that is based on very basic things about how we can start working with jQuery in SharePoint 2013. If you are already an expert in using jQuery in SharePoint 2013, then please ignore this post and read my other posts.

jQuery in SharePoint

To give the reference for the jQuery files either you can download and store in some document library in your SharePoint 2013 site or you can directly refer from the CDN which provided from Google, Microsoft or jQuery itself like below:

  • Google Path: http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
  • Microsoft Path: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js
  • jQuery Path: http://code.jquery.com/jquery-1.6.2.min.js

If you will download and store it in your document library then you can give the path like below:

<script language="javascript" type="text/javascript" src="https://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/jquery.min.js"></script>

Then you can write the code directly in a script editor web part or a content editor web part. It will display the alert box.

<script language="javascript" type="text/javascript" src="https://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT type=text/javascript>
jQuery(document).ready(function() {
alert(“Hello World");
});
</SCRIPT>

or:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert(“Hello World");
});
</script>

But it is not a good approach to put the code directly on the page. So what you can do is you can save the code in as a .js file and save it in some document library preferable you can store in SiteAssets library.

And then you can add a content editor web part and then you can give the file path as:

http://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/HelloWorld.js

Then save the page, the alert box should come. One advantage, you can get is next time suppose you want to modify the js then no need to edit the page and modify the code, you can modify the js file and upload it to the same document library.

And also if you want to get the older versions of the file then you can get it from the version history.

You may like following SharePoint jQuery tutorials:

I hope this will be helpful to start with jQuery in SharePoint Online or SharePoint 2013/2016 or SharePoint 2019.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

>