SharePoint 2010 Cookbook: Using jQuery with SharePoint

As you know, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid Web development. You may be wondering, however, if jQuery can be used  to help a SharePoint site flourish. Read on!

Challenge:

How can I use jQuery to improve SharePoint?

 

Solution:

To use jQuery with SharePoint, there are two things that need to be done: The JavaScript library should first be deployed to a location which can be accessed SharePoint pages, and the library should be loaded the SharePoint pages.

The recommended location for deployment of the JavaScript library is C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS folder. Doing so will allow the file to be loaded via the URL http://mysites/_layouts/jquery.js, because the _layouts part of the URL always points to the LAYOUTS folder.

There are a couple of ways you can do this.

1) Using the Content Editor Web Part to load your jQuery Library

The simplest way to load the library is adding a Content Editor Web Part to the page and adding the following script to its Source Editor in the tool pane:

<script type="text/javascript" src="http://mysites/_layouts/jquery-1.5.2.min.js"></script>

You may ask, “What if I want to use jQuery for a bunch of pages, do I have to add the Web Part to each page?” The answer to that question is “Unfortunately, yes,” so let’s take a look at the next strategy.

2) Using the Master Page to load the jQuery Library

By using the master page to load the library, you don’t have to add the Content Editor Web Part to each page on which you want to use jQuery. All you need to do is add the same script tag to your master, and in the HEAD tag:

<HEAD runat="server">
    . . .
    <script type="text/javascript" src="http://mysites/_layouts/jquery-1.5.2.min.js"></script>
    . . .
</HEAD>

This would seem to be the perfect way to load the file, but be advised that when you have multiple master pages, the situation will become more complicated…

3) Using SharePoint Delegate Control

By providing the contents to the Delegate Control, which can be used multiple master pages, you can make sure the library is loaded all the SharePoint pages. To do this, you need to create a Web user control that contains the script tag to load the jQuery library:

<%@ Control Language="C#" ClassName="jQueryControl" %>
<script type="text/javascript" src="http://mysites/_layouts/jquery-1.5.2.min.js"></script>

This Web user control needs to be deployed to the C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATECONTROLTEMPLATES folder. Additionally, you need to have a feature that will add the control to the Delegate Control.  For an example of what the feature’s manifest will look like, here is the user control named jQueryControl.ascx:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control
    Id="DelegateControl"
    ControlSrc="~/_controltemplates/jQueryControl.ascx />
</Elements>

The feature can be scoped to any level, and when it’s activated on a certain level, all the pages will automatically have the script tag in their HEAD tags.

Now, let’s start using jQuery with Sharepoint with a few examples as shown below:

Example 1: Assume that you have a SharePoint Task List, Calendar List, or Document Library which is displayed on a nice table with rows and columns, but one day you decide  it’s not so nice anymore, and try to add some animations to make it more interesting. Let’s try the code sample below:

$(document).ready(function()
     {
         $("table[class='ms-listviewtable'] tr").hover
         (
             function() {
                 $(this).addClass("myRowHighlight");
             },
             function() {
                 $(this).removeClass("myRowHighlight");
             }
         );
     }
 );

The code tries to highlight the entire row when the user hovers over the table. Of course, you need to declare the myRowHightLight CSS as well.

<style type="text/css"> 
   .myRowHighlight {color:red; background-color:#FFCC66} 
</style>

Now, Add the Content Editor Web Part into you page, open its tool pane and click on Source Editor.

Next, copy and paste the script and CSS class above to the Text Entry – Web Page Dialog

Open your SharePoint List, hover over one of the rows of the table, and the entire row is highlighted.

Example 2: Imagine you had a Publishing Page with a large chunk of content in the body. You definitely don’t want your readers to scroll over the vertical bar to read entire your content. So how can you split the content into pages without any work from server side?

I would recommend that you use jQuery to page your content. Of course, you can use your own preferred method to achieve this goal, but for now, let’s add the code below to the Source Editor in the tool pane of the Content Editor Web Part.

<script>
   1:  
   2: var paging = new Imtech.Pager();
   3: $(document).ready(function()
   4: {
   5:    paging.pagingContainer = $("#content");
   6:    paging.paragrahs = $("p", paging.pagingContainer);
   7:    paging.showPage(1)
   8: ;});

</script>

Now you can see how much neater your page is.

See Also:


SharePoint

Applications

SharePoint apps are stand-alone applications that perform specific tasks on a SharePoint site. Apps can perform functions such as managing a discussion board or knowledge base, performing project management or time tracking tasks, or doing other workflow operations.

SharePoint

Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.


Essentials


Essentials Plus


Bamboo Premier


Project Management Suite


Knowledge Management Suite


External User Manager


SharePoint

Web Parts

Extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of Web Parts. Web Parts are the building blocks of pages on a SharePoint site that can be used to customize the user interface and content of a site page. 

SharePoint

Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.


Essentials


Essentials Plus


Bamboo Premier


Project Management Suite


Knowledge Management Suite


External User Manager


Office 365

Cloud Parts

Cloud Parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft Office 365. More than mere ports of existing software to the cloud, our Cloud Parts have been built from the ground up to take advantage of the best that the cloud has to offer.

SharePoint

Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.


Cloud Parts Suite for O365/SP Onl.


Featured Services

SharePoint Health Check

A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

SQL Health Check

Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

My SharePointXperts

The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!