Adding jQuery to SharePoint

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML

In this post we will look at the method used to add jQuery to your SharePoint environment with the view of making use of it to add the ultra cool Nivo slider.

As the quote above mentioned, jQuery is a JavaScript library designed to simplify the client-side scripting of HTML or in layman’s terms, do cool stuff in your browser.

However, it isn’t just a case of clicking a tick box, there are a few things you need to do to to get jQuery working and these are listed in the steps below.

1. Download the latest version of jQuery
2. Add jQuery to SharePoint
3. Add jQuery to your MasterPage
4. Make use of the library in some way

Simple! no?
Well not excactly but let’s go through the steps in some detail and see how we can get it working.

Step One – Download the latest version of jQuery

You can do this by going to http://docs.jquery.com/Downloading_jQuery

Step Two – Add jQuery to SharePoint

We need to make sure we have jQuery available for us to reference and this can be done in three ways

• CDN - A Content Delivery Network or Hosted jQuery and makes use of any cached versions of jQuery (A connection to the internet is required)
• Document Library – This is perfectly fine although the load of jQuery will require pulling it from the database and some clever developers tell me that this isnt always the best method.
• 14 Hive or SharePoint Root  - The preferred method as it is stored on the server but this requires you or a person with the required permissions to deploy jQuery to the SharePoint root (see video).

Once we have decided how we are going to reference it we can then move to step three.

Step Three – Add jQuery to the MasterPage

This is a bigger step than it may seem, if you have read the Introduction to SharePoint Designer you will have a good overview of SharePoint Designer however, you can watch the video accompanying this post for more information on this step.
You will need to open your MasterPage and add the following code to the header section preferably.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>

This is my preferred method using the CDN from Microsoft however, thanks to a wonderful post from Chris CoyierI discovered this additional way of checking if jQuery has loaded and if it hasn’t failing back to my local copy

<script type="text/javascript">if (typeof jQuery == 'undefined') {    document.write(unescape("%3Cscript src='/_layouts/jQuery/jquery-1.6.2.min.js' type='text/javascript'%3E%3C/script%3E"));}</script>

Once you have added this code you should be able to garauntee some form of jQuery loading up

Step Four – Make use of the library in some way

You can now add the following jQuery into your MasterPage to check it’s loading although I would REMOVE this before publishing the MasterPage or it will run on every page.

<script type="text/javascript">$(function() { alert('Are you ready to rumble?'; });</script>

Excellent so now we are all ready to go and add our Nivo Slider.

Thanks

Matthew Hughes

About Matthew Hughes

Matthew Hughes has written 56 post in this blog.

I am a SharePoint Developer for UK based Intelligent Decisioning Ltd. Check us out id-live.com I setup SharePoint 365 as I saw that there was a need for introductory blog posts and knew there were some fantastic authors out there who might not have time to run their own blogs and keep them updated reguarly.

• View all posts by Matthew Hughes →
• Blog
• Twitter
• Facebook
• Google+