If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover all of the important basics of jQuery in a SharePoint context. By the end of the workshop, you'll be ready to start adding jQuery customizations to your SharePoint pages. We'll cover Selectors, Traversing, Manipulation, Events and Effects as I cover in my article series at SharePoint Magazine.
2. Who Is Marc?
• Co-Founder and President of Sympraxis Consulting LLC,
located in the Boston suburb of Newton, MA, USA.
Sympraxis focuses on enabling collaboration throughout the
enterprise using the SharePoint application platform.
• More than 30 years of experience in technology professional services and software
development. Over a wide-ranging career in consulting as well as line manager
positions, Marc has proven himself as a problem solver and leader who can solve
difficult technology problems for organizations across a wide variety of industries
and organization sizes.
• Three-time awardee of the Microsoft MVP award for SharePoint Server (2011,
2012, 2013).
4. Getting Started
• Add references to the jQuery library
• References can be in:
– Master page
– Page layout
– Individual aspx pages
• jQuery and other .js files can be stored in:
– Document Library
– _layouts folder
– Retrieved from a CDN
• Use “protocol-less” src and href
5. Script from CDNs
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited
http://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/
Note the protocol-less
references
6. HTML Elements
Powered by <a href="http://office365.com">Office365</a>.
Opening tag Closing tag
Attribute Value
<input id="my-cbox" class="foo bar" type="checkbox" checked />
Element Self-closing tag
Id Attribute PropertyValueClass(es)
7. 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 look and feel
• The DOM is acted upon by any script in the page
• View Source is *not* the live DOM
8. What Can We Do With the DOM?
• Add or remove CSS classes
• Create new or remove existing HTML elements
• Change HTML element attributes
• Bind to events
• And so much more…
The DOM is HTML, which is XML, which is data!
9. The Basic Idea of jQuery
$(".article").hide();
Select something
Do something!
Remember this from CSS?
11. jQuery Documentation:
Your Friend
• The jQuery documentation is used to be
arranged to help you
• What you need to know is was arranged
sequentially from top to bottom
12. jQuery Selectors
• Selectors are the most important
jQuery concept
• Selecting the right DOM object(s)
is half the battle
• Selectors return a jQuery object
containing a collection of DOM
objects: 1 to n matching elements
15. Useful jQuery Selector Tricks
$("[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 attribute
$("[id][class][style]"); // Has all
•.NET Applications like
SharePoint generate some long
and ugly markup and IDs
id="ctl00$ctl41$g_26ee1140_76aa_4ec0_8
8c4_11e7e96480f4$ctl00$ctl02$ctl00$ctl
01$ctl00$ContentTypeChoice"
•These selector tricks really help
16. 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 get/set
property values (checked, selected, or disabled)
– .attr() gets/sets attribute values (class, style, etc.)
17. Example with SharePoint Attributes: Get
$("select[title='Region']").val();
$("select[title='Region'] option:selected").text();
18. Example with SharePoint Attributes: Set
$("select[title='Region']").val(5);
$("select[title='Region'] option:selected").text("boo");
19. 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
20. Traversing Down:
Find an Element’s Specific Children
$("div[id$='QuickLaunchNavigationManager'] li:first")
.parent().find("li:eq(3) li:first .menu-item-text");
22. Manipulation
• Once you’ve gotten the right
element(s), you can:
– Manipulate their attributes
– Set properties
– Change their contents (e.g.,
innerHTML)
23. Events
• jQuery’s events enable you to work
with all of the standard JavaScript
events, plus create your own
• Used to create behaviors that take
effect when the user interacts with
the page in the browser, and to
further manipulate those behaviors
25. jQuery Events
$("h3.ms-WPTitle").click(function() {
alert("Go directly to the list.");
});
$("h3.ms-WPTitle").hover(function() {
$(this).css("background-color", "fuchsia");
$(this).data("title", $(this).html());
$(this).html("Click to visit");
},function() {
$(this).css("background-color", "white");
$(this).html($(this).data("title"));
});
26. 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
28. Putting It Together:
Toggling Web Part Visibility
var wpTitles = $("h3.ms-WPTitle");
// Remove the links on the Web Part Titles
wpTitles.find("nobr").unwrap("<a></a>");
// Show the pointer on mouseover
wpTitles.css("cursor", "pointer");
// Add click behavior that toggles the visibility
wpTitles.click(function() {
$(this).closest("table").closest("tr").next().slideToggle();
});
29. Putting It Together:
Arranging Checkboxes
// 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);
30. jQueryUI Takes Effects Further
$(".article").tabs();
$("input").autocomplete();
$("#infoBox").dialog();
$("table.sortable").sortable();
…and many more
31. jQuery Plugins Abound!
• If you want to do something sophisticated,
look for an existing plugin
• Due diligence – some of the plugins aren’t
written very well
• Beware of “plugin sprawl”
32. More Useful Tools
• JSLint
– http://jslint.com/
– Checks your script against accepted standards
– “Warning: JSLint will hurt your feelings.”
• JSHint
– http://jshint.com/
– Like JSLint, but a little more forgiving
– More jQuery aware
• JavaScript Compressorator
– http://compressorrater.thruhere.net/
– Minifies script files using multiple methods