In this blog I will walk you through several ways to load the jQuery Library onto your SharePoint site or server and set up a simple hello world script. Then over several more posts I will walk through examples that show just how powerful jQuery and SharePoint can be when used together. Some examples are: hiding page elements, automatically collapsing and expanding the Quick Launch menu, enhancing the picture gallery, and the best of all… editing web part properties and content with just one mouse click.
There are several ways to get the jQuery Library onto your SharePoint page or site. I’m not going to make any claim to which method is the best; you should use the method that works best for you in your environment.
Using a document library and a Content Editor web part
This method is great for quickly adding the jQuery library to a page when you do not have SharePoint Designer.
1. Upload the jQuery Library to a document library
2. Add a Content Editor web part to your page
3. Add the following script reference to the web part using the Source Editor, making sure to change the src URL to the path of the uploaded jQuery library
Spoiler: In an upcoming blog, I will show you how to use jQuery to add edit icons to all web parts on a page, making the source editor much easier to get to.
Using SharePoint Designer on a web page
This method is good when you want to store the library in a more permanent location that is not visible on the site or want to place the script directly in the page and not in a web part.
1. Open the site in SharePoint Designer
2. Copy the jQuery Library to the site in the same location as the default.aspx file
3. Add the jQuery reference in the page header by adding
under the following line:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
4. Script can then be added to any Content Editor web part on the page or directly into the page in designer
I like to use this method to add the jQuery Library under the root web of the site. You can then reference the that jQuery file from any page by simply adding the following script in a Content Editor web part.
Using SharePoint Designer on the master page
This method is very similar to the one above, except that by adding the jQuery reference to the master page you will be able to use jQuery on any page in that site. Just remember that each subsite will have its own master page.
1. Open the site in SharePoint Designer
2. Navigate to the _catalogs/masterpage directory and copy the jQuery Library into the site
3. Open the default.master file
4. Add the following script to the <HEAD> section of the page
5. You will then be able to use jQuery in the master page or in any site that uses the master page
Installing a feature that adds the JQuery reference on all sites
This is a good method to add jQuery to every page in a site collection if you have the ability to install a feature on the site. Jan Tielens has created just such a feature which is available at http://smarttools.codeplex.com/ . I will not plagiarize from his blog but the basic idea is to create a web control which contains the script reference. This control is included with a feature which adds the jQuery files to the layouts directory and the jQuery reference to all SharePoint pages for which the feature is scoped.
Once you have completed one of these four methods it is time to actually use jQuery to do something on our SharePoint page. The simplest way is to create a new Content Editor Web Part on a page to which the jQuery reference was added. Or add it to the existing Content Editor Web Part if you used the first method.
Start by adding the following script using the Content Editor Source Editor:
The ready() function instructs jQuery to wait until the document is loaded and ready to be manipulated.
When you refresh your page you should now see the “Hello” alert. If so, congratulations you have successfully added jQuery to your SharePoint page. If not, try viewing the source html of the page and verifying that the jQuery reference is present and points to the correct location. Also, if you copied and pasted the code above, it is also a good idea to make sure the quotes copied correctly into the Source Editor.
Replacing the alert(“Hello”); with $("A").css("color","green"); . Will turn all links on the page to green, this is a very simple example but should give you a glimpse of just how powerful jQuery can be.
In my next post I will show you additional ways to enhance the SharePoint user experience using jQuery. Until then, take a look at the examples at http://docs.jquery.com/Main_Page and think of ways to make your SharePoint experience even better.