• Like
SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint


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 …

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.

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. • 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).
  • 2. is
  • 3. Note the protocol-less references Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited http://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/
  • 4. Opening tag Closing tag Powered by <a href="http://office365.com">Office365</a>. Attribute Value Element Self-closing tag <input id="my-cbox" class="foo bar" type="checkbox" checked /> Id Class(es) Attribute Value Property
  • 5. The DOM is HTML…which is XML…which is data!
  • 6. Select something $(".article").hide(); Do something! Remember this from CSS?
  • 7. $(document).ready(function() { // do something }); $(function() { // do something }); jQuery(function($) { // do something });
  • 8. collection
  • 9. $("div[id$='QuickLaunchNavigationManager'] li:first span.menu-item-text")
  • 10. $("td.ms-list-addnew a:eq(1)")
  • 11. • .NET Applications like SharePoint generate some long and ugly markup and IDs id="ctl00$ctl41$g_26ee1140_76aa_4 ec0_88c4_11e7e96480f4$ctl00$ctl02 $ctl00$ctl01$ctl00$ContentTypeCho ice" • These selector tricks really help $("[id='foo']"); // $("[id!='foo']"); // $("[id^='foo']"); // $("[id$='foo']"); // $("[id*='foo']"); // $("[id~='foo']"); // $("[id|='foo']"); // $("[id]"); // $("[id][class][style]"); Equal to Not equal to Starts with Ends with Contains Contains word Contains prefix Has attribute // Has all
  • 12. $("select[title='Region']").val(); $("select[title='Region'] option:selected").text();
  • 13. $("select[title='Region']").val(5); $("select[title='Region'] option:selected").text("boo");
  • 14. $("div[id$='QuickLaunchNavigationManager'] li:first") .parent().find("li:eq(3) li:first .menu-item-text");
  • 15. SelectCandidate SelectResult <select <select var possibleValues = $("select[ID$='SelectCandidate'][Title^='" + name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80 name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80478 4787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$c 7763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$c opt.multiSelectColumn + " ']"); tl00$ctl00$SelectCandidate" title="City tl00$SelectResult" title="City selected values" possible values" var selectedValues = id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047877 id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047 63_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl possibleValues.closest("span").find("select[ID$='SelectResult'][Title^='" + 87763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl 00_SelectResult" style="width: 162px;" 00_ctl00_SelectCandidate" style="width: onkeydown="GipHandleHScroll(event)" opt.multiSelectColumn + " ']"); 162px;" onkeydown="GipHandleHScroll(event)" ondblclick="GipAddSelectedItems(ctl00_m_g_e84 5e690_00da_428f_afbd_fbe804787763_ctl00_ctl04 _ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLoo kupPicker_m); return false" onchange="GipSelectCandidateItems(ctl00_m_g_e 845e690_00da_428f_afbd_fbe804787763_ctl00_ctl 04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiL ookupPicker_m);" size="350" multiple=""> ondblclick="GipRemoveSelectedItems(ctl00_m_g_e84 5e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ct l07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPic ker_m); return false" onchange="GipSelectResultItems(ctl00_m_g_e845e69 0_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_ m);" size="20" multiple="">
  • 16. $(".article").click(function(){ // do something }); $(".article").mouseover(function(){ // do something });
  • 17. $("h2.ms-WPTitle").click(function() { alert("Go directly to the list."); }); $("h2.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")); });
  • 18. $(".article").hide(); $(".article").slideUp(); $(".article").fadeOut("slow"); $(".article").animate({ "font-size": "24px", "background-color": "red" }, 5000);
  • 19. var wpTitles = $("h2.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(); });
  • 20. // 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);
  • 21. $(".article").tabs(); $("input").autocomplete(); $("#infoBox").dialog(); $("table.sortable").sortable();
  • 22. http://jslint.com/ http://jshint.com/ http://compressorrater.thruhere.net/
  • 23. http://www.flickr.com/photos/boliyou/2884130773/
  • 24. eMail Blog SPServices SPXSLT Books The Middle Tier Manifesto marc.anderson@sympraxisconsulting.com http://sympmarc.com http://spservices.codeplex.com http://spxslt.codeplex.com http://sympmarc.com/books http://bit.ly/middletier