Using jQuery with Sharepoint 2010

By | September 6, 2011

Several days back I was asked a question in this blog relating to using JavaScript in a Sharepoint, it ended up with multiple questions and one was using jQuery in Sharepoint, as usual I searched my own blog for answers becuase that is one of my main reasons having this is to store information like this that I may need in the future, a reference for what I had done which I may be able to use again someday.  Anyways as I was searching and I found out that I havent posted this article, I thought I already have made one before but no, so this will be my chance.

So how would you use jQuery in Sharepoint? You can follow this easy steps and you will be ready to go in minutes


1. Download jQuery

Download latest verion of jQuery here  http://docs.jquery.com/Downloading_jQuery

2. Save it in an accessible location in Sharepoint

Using Sharepoint Designer I added a Folder called “Scripts” inside the “Style Library” of the root level of the site. I then added the latest jQuery File into that folder.

3. Place a reference on that jQuery from your code

The best place for this will be your master page so that it can be used anywhere in your site, so open the master page (by default SharePoint 2010 uses v4.master) you are using in Advanced mode then add your javascript reference like such.

<script src="/Style%20Library/Scripts/jquery-1.6.2.js" type="text/javascript"></script>

you place that inside the <head> tag

Save that master page and you are ready to go

4. Test if its working

If you are using FireFox open up firebug or if you are using IE you can press F12.  Go to the script tab to check whether your javascript reference is there, then on the console window try wether that reference works by typing something like this.

$("#MSO_ContentTable").text("Welcome to Sharepoint jQuery")

you should get a result something like this


One thought on “Using jQuery with Sharepoint 2010

  1. westerdaled

    Hi

    Firstly, I have been looking through your posts. and omg this some real treasured gold here.. I have a number of business problems a lot of them are covered by you e,g, cascaded menus.

    Anyway, if you remember we worked on some javascript for a dvwp in August in which I added references to this library as well as jQuery using the method you describe in your post. Ok, say I want to add the references to all the master pages in all the subsites then this is a big job. I just wondered if there is a quick way of doing it..

    My first thought was to do this globally in the farm site definitions or maybe deploying a customised masterpage via a feature ( in vs2010) ..However with the later, I have a client who has done some bizarre things with the masterpages so it may need to number of such features…

    Reply

Leave a Reply