Step by Step: How to Add jQuery to a SharePoint 2010 Site Collection

Written by Denis Stadler on . Posted in jQuery

Both SharePoint 2010 editions (Server and Foundation) don’t provide a built-in feature that activates jQuery in a site collection.

Adding jQuery to SharePoint might not present a high interest for a traditional intranet portal solution, but if we use the Publishing feature, especially in web sites, jQuery could help us to improve our users’ experience.

The easiest way to add jQuery is, of course, to edit the master page and add the following lines of code, before the closing </head> tag:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
</script>

This code show his limitations if the computer of the user connecting to the SharePoint solution doesn’t have an active internet connection.

The Build of an Add-jQuery SharePoint Feature

A more elegant solution is to build a custom feature that injects the code in the “PlaceHolderAdditionalPageHead” content place holder, a content place holder that should exist on every SharePoint master page.

<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead"
runat="server"/>

To achieve this, I had initially to create a new SharePoint empty project using Visual Studio 2010.

Then, I right clicked the project and added some SharePoint mapped folders: Layouts, Control Templates (under SharePoint mapped folder – Template), and a custom folder to store the custom items that I wanted to add to the solution.

Under the Control Templates folder I added two user controls. My plan was to create two features, both having the capability to activate jQuery (offline and online).

The code of the files were:

<%@ Control Language="C#" %>
<!--
    Stadler - AddjQuery 15100
-->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
</script>

 

<%@ Control Language="C#" %>
<!--
    Stadler - AddjQuery 15200
-->
<script type="text/javascript"
src="/_layouts/Stadler.AddjQuery/jquery-1.8.1.min.js">
</script>
<script type="text/javascript"
src="/_layouts/Stadler.AddjQuery/jquery-ui-1.8.23.custom.min.js">
</script>

Then, I included into the project the minified jQuery and jQuery.UI files (when writing this article the version of jQuery was 1.8.1).

The final technical step was the creation of two SharePoint empty elements, having the following code:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control Id="AdditionalPageHead" ControlSrc="~/_CONTROLTEMPLATES/Stadler.AddjQuery/jQuery1.ascx" Sequence="15100" xmlns="http://schemas.microsoft.com/sharepoint/" />
</Elements>

 

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control Id="AdditionalPageHead" ControlSrc="~/_CONTROLTEMPLATES/Stadler.AddjQuery/jQuery2.ascx" Sequence="15200" xmlns="http://schemas.microsoft.com/sharepoint/" />
</Elements>

Then I have packaged the solution and created two features (one for each SharePoint empty element).

You can download the full solution here – jQuery and SharePoint 2010.

Trackback from your site.

Denis Stadler

I'm a technology enthusiast, with more than 10 years of experience in SharePoint and Dynamics CRM projects. To find more details about, please visit the about me page.

Comments (2)

  • Nnabu

    |

    Interesting solution but not necessary in my view. You could have stayed with the first solution and just copy the jQuery library to the style folder. That also means that it is always maintained at one place without the need to recompile and apply your feature solution for any future jQuery updates.

    Reply

    • Denis Stadler

      |

      Please consider also the followings:
      – the application life cycle management of your solutions. You should test your apps that are using jQuery before changing the solution.
      – in this way you don’t have to modify any page when you need to add jQuery to the page

      Reply

Leave a comment

*