<< Back To All Blogs
Adding jQuery to SharePoint
Thursday, January 14th, 2010
Recently I have been doing some more client-side validation to spice up the required fields and the format of required fields while a user creates a new list item, edits a list item, and a few other operations. Obviously to do this using jQuery the first step is to actually embed the jQuery library so it can be used in SharePoint.
There are really 2 different approaches that I find feasible, each one has it's advantages and disadvantages. There are a few other options that I found while Googling as well, but these are less useable for our purposes.
1. First Approach: Embed jQuery for the entire site
Since I am using jQuery site-wide, this makes the most sense for my purposes. This is a rather simple process which involves placing the jQuery library in the templates folder on the server, and adding a script tag to include the file. You will need to download the latest jQuery library, and place it in:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\scripts.
I added the scripts folder just to make things a little more organized, and because I am creating some custom plugins for SharePoint, which will be discussed in a later blog post. After placing the file in the templates folder, fire up SharePoint Designer, and edit the master page. Above the tag, add the following:
2. Second Approach: Embed jQuery for a single page
The second approach involves an easier and quicker process, by adding a Content Editor Web Part to whatever page you need, and adding the script tag above into
the source editor of the Content Editor Web Part.
Please note that there is also the option to use the Google Code-Hosted version of jQuery as well. This will load the library each time from Google Code's Content Delivery system. The downside to this is you are leaving the ability to use jQuery in an outside entity's hands, and we all know, things don't always go as planned. All of the above would be the same, except you would enter a full URI to the Google Code version.
Once you have done either of these steps, to test that it is working properly you can add (or edit if you used approach 2) the Content Editor Web Part to a page. You can then edit the source code for the Content Editor Web Part and add the following code to verify it is working properly:
If all worked well you should receive an alert saying "It Worked!" when the page has finished loading.
You are now on your way with jQuery inside of SharePoint! I have a few more posts relating to some more specific SharePoint issues we are resolving using jQuery, and will post those in the near future.
I had a few hiccups along the way on this one, so a special thanks goes out to @sympmarc and @jvossers.
SharePoint jQueryin' Tom Out.
Creating a dynamic SharePoint settings DropDown using a ToolPart
Retrieving data from SharePoint SOAP Requests using LINQ
Using Ext JS in SharePoint... a tip
Marc D Anderson said on Friday, January 15th, 2010 @ 9:03 AM
I usually recommend that the .js file be stored in a Document Library at the root of the Site Collection. This way, the file can be managed as content rather than as code. I strive with my solutions to have a "no touch server" approach to keep things cleaner.
Thorsten Hans said on Friday, January 15th, 2010 @ 3:02 AM
nice post. The only point which I disagree with you. To include jQuery in all sites, I would prefer an AdditionalPageHead Control which will include the jQuery.js file.
By using an AdditionalPageHead Control, you are able to change the MasterPage for a SPSite and jQuery will be still available.
Greetings from Germany
Add A Comment
Email Address: (not public, used to send notifications on further comments)
Enter the text above, except for the 1st and last character: