In this blog post we’ll discuss how to use jQuery in a visual web part to help implementing parent/child radio buttons. To accomplish this, we’ve borrowed ideas from other places, we’ll mention them as we go along.
First, create a new SharePoint project and add a visual web part to it. Then, download the latest version of the jQuery library. We’ll be using jquery-1.7.js.
Please note: This is the developer version, which we’ll be using throughout this example. In a production environment, you should use the minified version instead (called jquery-1.7.min.js, or the equivalent of the version you are using).
SPS 2010 contains a new type of library called Site Assets. It can be used to store resource files such as images, style sheets, and JavaScript files. We’ll use it as a new home for jquery-1.7.js. Later, we’ll discuss how to do this automatically, but the next procedure explains how to add the jQuery library manually:
- Open a site collection SharePoint Designer 2010 (SPD).
- Click the Site Assets node.
- Open Windows explorer and browse to jquery-1.7.js.
- Drag and drop it within the Site Assets node.
Since we’ve made the jQuery library available within SharePoint, we’ll be able to leverage it. We’ll do this by adding a link to it in our user control (*.ascx), like so:
<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server”
Name=”~sitecollection/SiteAssets/jquery-1.7.js” />
Please note: You shouldn’t use the ondemand=true attribute, as we want the jQuery library to be available right away.
To test if this has worked, we’re borrowing some ideas from http://blogs.msdn.com/b/yojoshi/archive/2010/06/17/using-jquery-with-sharepoint-2010.aspx :
- Press F5 to open MSIE (we’re assuming you’ll be able to add the visual web part to the web part page).
- Press F12 to bring up “Developer Tools” (for MSIE 8 and higher).
- Click the Script tab and verify jQuery is getting loaded. You know this to be true if you find this entry:
document.write(‘<script src=”/siteassets/jquery-1.7.js”></’ + ‘script>’);
- In the right console window, add the following jQuery command:
$(“#MSO_ContentTable”).css(“background-color”,”cyan”);
- Click the Run Script button.
If the page background turns cyan, you’ll know that it works and that jQuery did it for you.
(From: http://blogs.msdn.com/b/yojoshi/archive/2010/06/17/using-jquery-with-
At this point, jQuery can be used for client-side scripting. At this point, the code of the user control of the visual web part looks like this:
<%@ Assembly
Name=”$SharePoint.Project.AssemblyFullName$” %>
<%@ Assembly Name=”Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls”
Assembly=”Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”Utilities” Namespace=”Microsoft.SharePoint.Utilities”
Assembly=”Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”asp” Namespace=”System.Web.UI”
Assembly=”System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35″ %>
<%@ Import Namespace=”Microsoft.SharePoint” %>
<%@ Register TagPrefix=”WebPartPages”
Namespace=”Microsoft.SharePoint.WebPartPages”
Assembly=”Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c” %>
<%@ Control Language=”C#” AutoEventWireup=”true”
CodeBehind=”VisualWebPart1UserControl.ascx.cs”
Inherits=”VisualWebPartProject1.VisualWebPart1.VisualWebPart1UserControl” %>
<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>
<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server”
Name=”~sitecollection/SiteAssets/jquery-1.7.js” />
It only contains a reference to the jQuery library. Now, add the code to it that creates a parent/child radio button list. This idea was taken from: http://www.billsternberger.net/jquery/using-jquery-to-enable-and-disable-radio-buttons-onclick/ and it looks like this:
<script>
$(function () {
//init Texas
$(‘#DivTexas :input’).attr(‘checked’, false);
$(‘#DivTexas :input’).attr(‘disabled’, true);
//init Virginia
$(‘#DivVirginia :input’).attr(‘checked’, false);
$(‘#DivVirginia :input’).attr(‘disabled’, true);
});
function EnableTexas() {
//disable Virginia options
$(‘#DivVirginia :input’).attr(‘checked’, false);
$(‘#DivVirginia :input’).attr(‘disabled’, true);
//enable Texas options
$(‘#DivTexas :input’).removeAttr(‘disabled’);
}
function EnableVirginia() {
//disable Texas options
$(‘#DivTexas :input’).attr(‘checked’, false);
$(‘#DivTexas :input’).attr(‘disabled’, true);
//enable Virginia options
$(‘#DivVirginia :input’).removeAttr(‘disabled’);
}
</script>
<asp:RadioButton Value=”A” Text=”A” runat=”server” GroupName=”ParentGroup” ID=”parent1″ onclick=”EnableTexas()” />
<div id=”DivTexas”>
<asp:RadioButton Value=”AA” Text=”AA” runat=”server” GroupName=”ChildGroupA” ID=”child1″ /><br />
<asp:RadioButton Value=”AB” Text=”AB” runat=”server” GroupName=”ChildGroupA” ID=”child2″ /><br />
</div>
<asp:RadioButton Value=”B” Text=”B” runat=”server” GroupName=”ParentGroup” ID=”parent2″ onclick=”EnableVirginia()” />
<div id=”DivVirginia”>
<asp:RadioButton Value=”BA” Text=”BA” runat=”server” GroupName=”ChildGroupB” ID=”child3″ /><br />
</div>
The result is that you can only check a child radio button if the parent radio button is checked. It looks like this:
Since we don’t want to add the jQuery library manually once we start deploying it, we’re taking an idea from http://www.lightningtools.com/blog/archive/2009/12/06/add-javascript-files-once-to-a-page—sharepoint-sandbox.aspx We’ll add the jQuery library as a module to our SharePoint project, and deploy it to a subfolder in the Site Assets library.
- Right-click SharePoint project and choose Add > New Item.
- Choose Module and call it MyAssets.
- Within the MyAssets folder, delete Sample.txt.
- Right-click the MyAssets folder and choose Add.
- Locate jquery-1.7.js (or better yet: locate the minified version) and add jquery-1.7.js.
- Open up Elements.xml, and add the following attribute: Url=”SiteAssets” to the Module element.
Now, the Module XML should look like this:
<?xml version=”1.0″ encoding=”utf-8″?>
<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”>
<Module Name=”MyAssets” Url=”SiteAssets”>
<File Path=”MyAssets\jquery-1.7.js” Url=”MyAssets/jquery-1.7.js” />
</Module>
</Elements>
Pressing F5 causes jquery-1.7.js to be deployed to the Site Assets library, in the My Assets folder. This means you should update the link in the user control like so:
<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server”
Name=”~sitecollection/SiteAssets/MyAssets/jquery-1.7.js” />
And there you have it!
SharePoint Dragons 