SharePointfest Denver - A jQuery Primer for SharePoint

A jQuery Primer for SharePoint

Getting Started

• Add references to the jQuery library
– Master page
– Page layout
– Individual aspx pages

Referencing Script Libraries from CDNs

<link type="text/css" rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/theme
s/start/jquery-ui.css" />

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.mi
n.js"></script>

src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery
-ui.min.js"></script>

src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7
.1a/jquery.SPServices-0.7.1a.min.js"></script>

More: http://sympmarc.com/2012/04/20/referencing-jquery-jqueryui-and-spservices-from-cdns/

SharePoint Web Technology

• HTML
– Hypertext Markup Language
– Content and structure

• CSS
– Cascading Style Sheets
– Presentation and style

• JavaScript and jQuery
– Interactive behavior

HTML Elements

Opening tag Closing tag

Powered by <a href="http://office365.com">Office365</a>.

Attribute Value

Intro to CSS:
Why does CSS matter?
• CSS = Cascading Style Sheets
• jQuery uses selectors that are very similar
to CSS selectors
• CSS is the fundamental styling
mechanism for the Web
• HTML + CSS + jQuery = AWESOME

CSS Styles

Select HTML element(s) .article {
Modify them! color: red;
}

CSS Element Selectors

p { <p>
color: red; Paragraph of text.
} </p>

Paragraph of text.

CSS Class Selectors

.article { <div class="article">
color: red; This is an article.
} </div>

This is an article.

CSS ID Selectors

#header { <div id="header">
color: red; This is a header.
} </div>

This is a header.

CSS Descendant Selectors

#header h1 { <div id="header">
<h1>
color: red;
This is a header.
} </h1>
</div>

This is a header.

CSS Composite Selectors
#header ul.top-nav li { <div id="header">
color: red; <ul class="top-nav">
} <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

• Item 1
• Item 2
• Item 3

CSS Complex Selectors
ul.top-nav > li { <ul class="top-nav">
<li>Item 1</li>
color: red; <li>
} Item 2
<ul class="menu">
<li>Menu 1</li>
</ul>
</li>
</ul>

• Item 1
• Item 2
• Menu 1

My CSS "Best" Practices

• Use truly unique class and id names
• Choose a prefix for your project, e.g. „xyz-‟
or „x51-‟
• All of your classes and ids will be easy to
select:
xyz-home-page-article
x51-top-section
• Don‟t be afraid of verbose class and ID
names!

What is the Document Object Model
(DOM)?
• The DOM starts as the page‟s markup
(HTML) as delivered to the browser by the
server: View Source
• Styled by the CSS which gives the page
its the look and feel
• The DOM is acted upon by any script in
the page

What Can We Do With the DOM?

• Add or remove CSS classes
• Create new HTML elements
• Remove HTML elements
• Change HTML element attributes
• And so much more

The DOM is HTML, which is
XML, which is data!

Internet Explorer Developer Tools (F12)

• Shows the Internet Explorer view of
SharePoint‟s pages – some pages are
rendered differently in other browsers

The Firebug Add-On for Firefox

• Better for debugging and looking at Net
traffic

The Basic Idea of jQuery

Select something

$('.article').hide();
Do something!

jQuery’s Document Ready

$(document).ready(function({
// do something
});

• Processing is suspended until the page‟s
DOM is fully loaded
• Ensures that all of the elements you need
are available

jQuery Documentation: Your Friend

• The jQuery documentation is
arranged to help you
• What you need to know is
arranged sequentially from
top to bottom

jQuery Selectors

• Selectors are the most important jQuery
concept
• Selecting the right DOM object(s) is half
the battle
• Selectors return a collection of DOM
objects – 1 to n matching elements

jQuery Element Selectors

<p>
Paragraph of text.
</p>

$("p")

jQuery Element Selectors
<p>Paragraph 1 of text.</p>
<p>Paragraph 2 of text.</p>

var allParagraphs = $("p");

allParagraphs is now defined as a jQuery object
which contains pointers to all paragraphs in the page

jQuery Class Selectors
<div class="article">
This is an article.
</div>

$(".article")

jQuery ID Selectors
<div id="header">
This is a header.
</div>

$("#header")

jQuery Descendant Selectors
<div id="header">
<h1>
This is a header.
</h1>
</div>

$("#header h1")

jQuery Composite Selectors
<div id="header">
<ul class="top-nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

$("#header ul.top-nav li")

jQuery Complex Selectors
<ul class="top-nav">
<li>Item 1</li>
<li>
Item 2
<ul class="menu">
<li>Menu 1</li>
</ul>
</li>
</ul>

$("#header ul.top-nav li")

Selectors for SharePoint

<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>

$("div.ms-quicklaunchheader")


<A accessKey=3
</A>
</DIV>

$("#ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll")


<A accessKey=3
</A>
</DIV>

$("a[id$='NavLinkViewAll']")

Useful jQuery Selector Tricks
• .NET Applications like SharePoint generate some long
and ugly markup and IDs
• These selector tricks really help
$("[id='foo']"); // Equal to
$("[id!='foo']"); // Not equal to
$("[id^='foo']"); // Starts with
$("[id$='foo']"); // Ends with
$("[id*='foo']"); // Contains
$("[id~='foo']"); // Contains word
$("[id|='foo']"); // Contains prefix

$("[id]"); // Has
$("[id][class][style]"); // Has all

jQuery Attributes

• Once you‟ve selected the right DOM
element, you can use jQuery to get or set
its attributes
• As of jQuery 1.6, the .prop() method
provides a way to explicitly retrieve
property values, while .attr() retrieves
attributes

jQuery Attributes: Get and Set
<div id="helloDiv" class="ms-bold">
Hello, world!
</div>

GET: var thisClass = $("#helloDiv").attr("class");
SET: $("#helloDiv").attr("class", "ms-hidden");

Example with SharePoint Attributes: Get

<A accessKey=3
</A>
</DIV>

var thisKey = $("a[id$='NavLinkViewAll']").attr("accessKey");

Example with SharePoint Attributes: Set

<A accessKey=99
</A>
</DIV>

$("a[id$='NavLinkViewAll']").attr("accessKey", 99);

Traversing

• Traversing lets you move around the DOM
based on your initial selection
• This is how you get at elements which are
difficult to select directly
• Ancestry matters in XML / HTML

Find an Element’s Ancestors
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

$("ul").parent();
$("ul").closest("div");

Traversing Down:
Find an Element’s Specific Children
<A accessKey=3
</A>
</DIV>

$("div.ms-quicklaunchheader").find("a");

SharePoint Example of Traversing:
Initial Selector
<A accessKey=3
</A>
</DIV>

$("a[id$='NavLinkViewAll']").parent();

SharePoint Example of Traversing:
Finding Parent
<A accessKey=3
</A>
</DIV>

$("a[id$='NavLinkViewAll']").parent();

Traversal Example from SPServices
SelectCandidate SelectResult

<select <select
name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80 name="ctl00$m$g_e845e690_00da_428f_afbd_fbe8047
4787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$c 87763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00
var possibleValues =
tl00$ctl00$SelectCandidate" title="City $ctl00$SelectResult" title="City selected
values"
possible values"
$("select[ID$='SelectCandidate'][Title^='" +
id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047 id="ctl00_m_g_e845e690_00da_428f_afbd_fbe804787
87763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl 763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_c
opt.multiSelectColumn + " ']");
00_ctl00_SelectCandidate" style="width: tl00_SelectResult" style="width: 162px;"
var selectedValues =
162px;" onkeydown="GipHandleHScroll(event)" onkeydown="GipHandleHScroll(event)"
ondblclick="GipRemoveSelectedItems(ctl00_m_g_e8
ondblclick="GipAddSelectedItems(ctl00_m_g_e84
possibleValues.closest("span").find("select[ID$='SelectResult
5e690_00da_428f_afbd_fbe804787763_ctl00_ctl04 45e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_
_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLoo ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookup
'][Title^='" + opt.multiSelectColumn + " ']");
kupPicker_m); return false" Picker_m); return false"
onchange="GipSelectCandidateItems(ctl00_m_g_e onchange="GipSelectResultItems(ctl00_m_g_e845e6
845e690_00da_428f_afbd_fbe804787763_ctl00_ctl 90_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl0
04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiL 7_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPick
ookupPicker_m);" size="350" multiple=""> er_m);" size="20" multiple="">

Manipulation

• Once you‟ve gotten the right element(s),
you can manipulate their attributes or
properties
• You can also change their contents

Manipulation:
Adding Text
Hello, world!
</div>

$("#helloDiv").append("And you're welcome to it!");

Hello, world! And you're welcome to it!
</div>

Manipulation:
Adding CSS Classes
Hello, world!
</div>

$("#helloDiv").addClass("my-class");

<div id="helloDiv" class="ms-bold my-class">
Hello, world!
</div>

Manipulation:
Wrapping Elements
Hello, world!
</div>

$("#helloDiv")
.wrap("<a href='http://cnn.com'></a>");

<a href="http://cnn.com">
Hello, world!
</div>
</a>

Manipulation:
Inserting Elements
Hello, world!
</div>

$("#helloDiv")
.before("<div>This is a new div.</div>");

<div>This is a new div.</div>
Hello, world!
</div>

Manipulation:
Changing CSS
Hello, world!
</div>

$("#helloDiv").css("background-color", "fuchsia");

$("#helloDiv").css({
border: "1px black solid",
color: "red"
});

Events

• jQuery‟s events enable you to work with all
of the standard JavaScript events
• These methods are used to register
behaviors to take effect when the user
interacts with the browser, and to further
manipulate those registered behaviors.

jQuery Events
$('.article').click(function(){
// do something
});

$('.article').mouseover(function(){
// do something
});

jQuery Events
$("h3.ms-WPTitle").click(function() {
alert("You'll now be taken directly to the list.");
});

$("h3.ms-WPTitle").mouseover(function() {
$("#helloDiv").css("background-color", "fuchsia");
});

Effects

• jQuery gives you a set of effects you can
use to change the elements in the page
• Effects can be:
– Visual: Change how the user sees existing
elements with animations
– Manipulative: Change where and how
elements are shown by moving them around
in the DOM

jQuery Effects Examples
$('.article').hide();
$('.article').slideUp();
$('.article').after('<em>Hello!</em>');
$('.article').css('color', 'red');

Putting It Together: Example

• This example changes what happens when
you click on a Web Part Title.
// Remove the links on the Web Part Titles
$("h3.ms-WPTitle").find("nobr").unwrap("<a></a>");

// Add click behavior that toggles the visibility
// of the Web Part
$("h3.ms-WPTitle").click(function() {
$(this).closest("table").closest("tr").next().toggle();
});

Putting It Together: Example
• This example shows part of SPArrangeChoices from
SPServices.
// Collect all of the choices
$(thisFormField).find("tr").each(function() {
columnOptions.push($(this).html());
});
out = "<TR>";

// Add all of the options to the out string
for(i=0; i < columnOptions.length; i++) {
out += columnOptions[i];
// If we've already got perRow columnOptions in the row, close off the row
if((i+1) % opt.perRow === 0) {
out += "</TR><TR>";
}
}
out += "</TR>";

// Remove the existing rows...
$(thisFormField).find("tr").remove();
// ...and append the out string
$(thisFormField).find("table").append(out);

jQueryUI Takes Effects Further

$('.article').tabs();
$('input').autocomplete();
$('#infoBox').dialog();

…and many more

jQuery Plugins Abound!

• If you want to do something sophisticated,
look for an existing plugin
• Do some due diligence – some of the
plugins aren‟t written very well
• Beware of “plugin sprawl”

More Useful Tools

• JavaScript Compressorator – Minifies
script files using multiple methods
http://compressorrater.thruhere.net/
• JSLint – Checks your script against
accepted standards http://jslint.com/
“Warning: JSLint will hurt your feelings.”

Contact Information
eMail marc.anderson@sympraxisconsulting.com
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
USPJA Academy http://uspja.com
eBook http://bit.ly/UnlockingDVWP
The Middle Tier Manifesto http://bit.ly/middletier

SharePointfest Denver - A jQuery Primer for SharePoint

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to SharePointfest Denver - A jQuery Primer for SharePoint (20)

More from Marc D Anderson (20)

Recently uploaded (20)

SharePointfest Denver - A jQuery Primer for SharePoint