NerdyHearn
Home
Blog

Contact
Mailing List

Software

Active Directory Products
Object Compare
Permission Compare

IPhone Products
Calls To Calendar
SMS To Gmail
Voicemail To Gmail

Sites
DocuTerminal
How Long For Me
My Music To Me
SaveMySerials
TypeCount

Blog
Twitter

NerdyHearn - Blog


<< 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:

<script type="text/javascript" src="/_layouts/scripts/jquery-1.3.2.min.js"></script>

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:

<script type="text/javascript">
$(document).ready(function() {
alert("It Worked!");
});
</script>

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.

Tags

jQuery SharePoint

Related Blogs


First Version of SharePoint Validator now available on CodePlex
Adding a Custom ASP.NET Page to MOSS/WSS
Reading Digital Signatures from InfoPath Forms in MOSS 2007 and WSS 3.0 Workflow
Automatically Setting File Name in SharePoint when submitting an InfoPath 2007 Form

Comments

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.

M.

Thorsten Hans said on Friday, January 15th, 2010 @ 3:02 AM

Hi,

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
Thorsten

Add A Comment

Name:


URL:


Email Address: (not public, used to send notifications on further comments)


Comments:



Enter the text above, except for the 1st and last character:


NerdyHearn - Latest tech news relating to C#, ASP.NET, SharePoint, PHP, general development, and more. DocuTerminal - Online Filing Cabinet solution. Scan, search and archive your paper documents. SaveMySerials - Protect yourself from theft, fire, natural disasters and more by recording your serial numbers My Music To Me - Stream your subsonic music collection to your Sonos wireless system TypeCount - Count how often you type across different computers!