Add jQuery to SharePoint

Disclaimer

I am referring to SharePoint 2010, I have used my Foundation version instance. I have not tested this in SharePoint 2013 but I think some information here are absolutely good for it.
There are some ways to accomplish this task, I show you the best and I will motivate it.

Get jQuery

First of all you need to download the jQuery minified of the version you want, usually the last one is the right choice if you have not particular needs (jQuery download page). The current latest one is jquery-1.10.1.min.js file.

Put jQuery on SharePoint folder

On SharePoint server you have to go in the “LAYOUTS” folder and create a folder for your site, it will be useful for more files other than jQuery. Then add a “Scripts” folder. I remember you that the 14 folder is usually in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14.
So now you have ..\14\TEMPLATE\LAYOUTS\[MySite]\Scripts. [MySite] in my case is “portal.alex75.it” (yes, with dots in the name), exactly the site collection I am using for this example.
Put in this folder the downloaded jQuery file.

Add script reference in master page

The master page that you must edit for sure is the v4.master. After you test the result is ok on it you can do the same thing for the others, they can be used in some circumstances, this is an explanation of their roles:
v4.master > The default master page.
default.master > It is used to support the 2007 user interface.
minimal.master > It is used for the requests from mobile devices
simple.master > It is used for accessdenied.aspx, confirmation.aspx, error.aspx, login.aspx, reqacc.aspx, signout.aspx and webdeleted.aspx pages (I haven’t this one in my SharePoint 2010 Foundation).

With SharePoint Designer use the context menu (right click) on the master you want to edit and select “Edit file in advanced mode“.
You have can find “<SharePoint:CustomJSUrl runat=”server” />” and add the script after this. It is after “core.js”.
It is important that the script you add (jQuery reference) is before the “<asp:ContentPlaceHolder id=”PlaceHolderAdditionalPageHead” runat=”server”/>” because in this manner jQuery was loaded before additional scripts in .aspx pages, in fact additional scripts in pages are added in this place holder.
So the result can be something like this:
jQuery Script in master page
I omit type on script element because I use to change the doctype to HTML5 (<!DOCTYPE html>).
In HTML5 script tag has default for type as “text\javascript” thus it is not needed.
You can use this:

Details and comment

The “official” way to add a script is using the SharePoint:ScriptLink tag but if you not need to use “SP” namespace (or other dependencies) the simplest HTML syntax is the best.
The “official” folder to add things like scripts and images is the Style Library folder but for a bug requests on this path are returned with a HTTP 304 response, so the “refresh” of the files are sometimes impeded. Now, there is the “Site Assets” library but this one is accessed by users with interface and I prefer not to risk someone modify or delete files so important.

Example code for cut&paste

<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server"/>
<SharePoint:CustomJSUrl runat="server" />
<!-- customization -->
<script type="text/javascript" src="/_layouts/portal.alex75.it/Scripts/jquery-1.10.1.min.js"></script>
<script>alert("jQuery version: " + $.fn.jquery);</script>
<SharePoint:SoapDiscoveryLink runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s