1. jQuery & SharePoint San Antonio Users Group – September Meeting September 22, 2009 Microsoft SharePoint Server

2. ©2009 Hitachi Consulting. Proprietary and Confidential. jQuery getting started What is jQuery? jQuery is a free, open source, lightweight JavaScript library that emphasizes interaction between JavaScript & HTML. jQuery simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript. * Microsoft plans to bundle jQuery with Framework 4 Where do I get it? http://jquery.com/ (latest version now 1.3.2) 19k (I said lightweight) http://jquery.com/ You can use a live version from Google Code @ http://code.google.com/p/jqueryjs/ i.e. http://code.google.com/p/jqueryjs/ 2

3. ©2009 Hitachi Consulting. Proprietary and Confidential. Loading jQuery Download jQuery (or know where to include it from Google Code) Add the reference to the jQuery framework. 2 basic options: 1. Include jQuery in your project and added to the page with the folowing mark-up: 2. jQuery can also be loaded using the Google AJAX Libraries API with the following mark-up:Google AJAX Libraries API 3. Add a direct link to the framework on Google Code 3 google.load("jquery", "1.3.2");

4. ©2009 Hitachi Consulting. Proprietary and Confidential. Using the Framework The starting $, this is the alias to the jQuery namespace. Here is an example of the most common function. It will wait until the document is done loading before executing it’s functional script (here alert): You can, and will have to mix regular JavaScript and jQuery: 4 $(document).ready(function() { alert('jQuery rulz!'); }); $(document).ready(function() { try { if ($("a#lnkSignin").length > 0) { if ($("a#lnkSignin[href*='?']").length > 0) { $("#lnkSignin").attr('href', $("#lnkSignin").attr("href") + "&goto=" + window.location.href); } else { $("#lnkSignin").attr('href', $("#lnkSignin").attr("href") + "?goto=" + window.location.href); } catch (e) { } });

5. ©2009 Hitachi Consulting. Proprietary and Confidential. Functional jQuery $("div.test").add("p.quote").addClass("blue").slideDown("slow");...finds the union of all div tags with class attribute test and all p tags with CSS class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes.... will request some.php from the server with parameters name=John and location=Boston and when the request is finished successfully, the success function will be called to alert the user. Functions; jQuery provides a varity of functions that can be used or “chained” in the query statement, or used on independently. 5 $.ajax({ type: "POST", url: "some.aspx", data: "name=Dave&location=SA", success: function(msg) { alert("Data Saved: " + msg); } }); var str = " foo "; jQuery.trim(str); $.trim(str); /* both return “foo” */

6. ©2009 Hitachi Consulting. Proprietary and Confidential. jQuery 1.3 Cheat Sheet 6 http://www.gmtaz.com/index.php/jquery-13-cheatsheet-wallpaper/

7. ©2009 Hitachi Consulting. Proprietary and Confidential. Integrating with SharePoint What do I need? The jQuery library SharePoint Designer (a free download now!) Ummmmmm, that’s it, ohh wait, you need a SharePoint instance ;-) What else? Some reccomended stuff IE8 has developer tools built in, or firebug in Firefox will make your life easier when trying to inspect the HTML jQuerify – checks to see if jQuery is loaded and loads it in the current page Selector gadget – point and click select items to build query http://www.selectorgadget.com/http://www.selectorgadget.com/ 7 javascript: (function() { document.body.appendChild(document.createElement('script')).src = 'http://jquery.com/src/jquery-latest.js'; })();

8. ©2009 Hitachi Consulting. Proprietary and Confidential. Now the easy part Open up your site with the SharePoint designer. DO NOT modify the original master page. Copy, Past rename and assign the copy as your master page you could run into issue. On you master page add the pointer to the jQuery file. Add a JS file and link it to the master page. Add JS to an HTML web-part Various methods…. Let’s see a demo… 8 If only Bill Gates had a penny for every time we’ve seen the SharePoint wheel, ohhh wait, he does!

9. ©2009 Hitachi Consulting. Proprietary and Confidential. Questions? Ask me! 9 Dave Cooper - Manager, Socialized Services Hitachi Consulting Microsoft National Portal & Collaboration Practice Mobile: (720) 366-3274 Mail: dcooper@hitachiconsulting.comdcooper@hitachiconsulting.com MSN: cooperfdiv@hotmail.comcooperfdiv@hotmail.com Twitter: cooperfdiv Quick Links: jQuery web-site: http://jquery.com/http://jquery.com/ jQuery on Google Code: http://code.google.com/p/jqueryjs/http://code.google.com/p/jqueryjs/ jQuery docs: http://docs.jquery.com/Main_Pagehttp://docs.jquery.com/Main_Page “See how I used Firebug to learn jQuery”: http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/ jQuery for absolute beginners Video Series: http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/ jQuery Library for SharePoint Web Services - http://spservices.codeplex.com/http://spservices.codeplex.com/ Heather Solomon’s Branding - http://www.heathersolomon.com/blog/ the best base master page on the planet!http://www.heathersolomon.com/blog/ *Next time, why Chuck Norris and SharePoint are alike!