Tuesday 29 November 2011

Adding and Testing JQuery to SharePoint

Adding  JQuery to SharePoint

Using jQuery in SharePoint opens a lot of doors for web developers/designers. jQuery allows you to change your SharePoint interface dramatically by modifying page elements and classes, providing event handlers, creating dynamic content– and even doing animations!

So let’s get started on how to get it set up.
1. Download
First, you’ll need to download the jQuery library. If you want, you can use a hosted solution, such as Google (for which you’ll need to sign up for an API key) you can skip to step 3. Otherwise, download the library to your local computer.
2. Save to SharePoint
While you can place the library anywhere you want, I recommend placing it in a document library in the root site collection of your farm. This makes it easier to find, and generally that’s a location that your entire organization would have access to already. They key is to place the library in a document library that everyone has access to.
I titled my document library “jQuery Libraries” – plural because I also use this library for jQuery plugins.
Upload your jQuery library to your document library.
Personal recommendation: (optional) Once you save the library, make a copy named “jquery.min.js” – erasing the version number. This will make things easier for you in the future because when a new version of jQuery comes out, you’ll just overwrite the “jquery.min.js” file with the new version – this will upgrade your library without you having to go edit every instance (master page or Content Editor Web Part, CEWP) where you referenced the file.
3. Create a reference in your Master page (or CEWP)
I recommend putting the jQuery reference into your master page, so that’s what I’ll show you how to do. jQuery is so small that I don’t think there’s any harm in having it load on every page – even those pages not using it…
You have the option of using jQuery on a page-by-page basis in a CEWP. For this, you’ll just put the “<script>” tag (below) onto a CEWP as needed.
Open SharePoint Designer to your root site collection, and load your master page (typically “/_catalogs/masterpage/default.master”).
Toward the top of the source code, in between the “<HEAD></HEAD>” tags, you’ll see the following line:
<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
After the line above, enter the following (change the URL: ‘src’ to reflect the name of your document library and jQuery file name, or to the URL provided if you’re using a hosted solution):
<script src="/jQuery Libraries/jquery.min.js" type="text/javascript"></script>
You can also get the URL for your library by navigating (using your internet browser) to you jQuery document library. Right click the jQuery.min file and select “Copy Shortcut” – then just paste that into the ‘src’ attribute.
Now, save (check-in, if needed) and exit SharePoint Designer.
4. Test
You should now have jQuery loaded up and ready to fire. Let’s just test it out and make sure it’s working:
On a testing webpage (create one if you need) place a CEWP onto the page. Open the tool pane, and click the “Source Editor” button. Now enter the following code:
<script type="text/javascript">

$(document).ready(function() {

alert("jQuery is working!!");

});

</script>
Click “Save”. You should get an alert on your screen that says “jQuery is working!!”. If you don’t, then you’ll need to check the URL in step 3 to make sure it’s correct. You can also view the source code of the page to make sure the jQuery reference you added is there.

No comments:

Post a Comment