Thursday, 26 May 2011

My jQuery, AJAX and SharePoint 2010 slide deck (SUGUK)

I attended a great SharePoint User Group UK meeting last night – compared to the London event it was notable how many people had travelled significant distances to be there, great dedication! The first session was me (doing the first dev-focused session at this event) and the second was a panel Q & A discussion with some excellent conversations. The topic for my talk was ‘SharePoint, jQuery and AJAX - a beginner's survival guide’, and although I’ve given this talk before I want to publish the deck and code samples again as I made some updates since the last time. In fact, it’s worth calling out one of these in particular here I think:

  • If using jQuery with SharePoint 2010, ALWAYS put jQuery into ‘no conflict mode’ via jQuery.noConflict(). This is necessary because SharePoint’s internal JavaScript uses the $ symbol as a variable name in a couple of places, and this causes clashes since it’s the alias used by jQuery

The deck has information on my ‘3 core techniques’ for jQuery/AJAX apps with SharePoint, and also tips and tricks like how to get Intellisense for jQuery and the SP2010 Client Object Model, tools for debugging AJAX apps etc. The code samples cover a fairly wide range of things:

  • jQuery
    • Showing/hiding elements
    • Setting the HTML of an element
    • Cascading dropdowns
    • AJAX requests
  • Client Object Model
    • Fetching simple data
    • Implementing a “type-ahead filtering” sample against the documents in a document library
    • Creating data e.g. a new list item
    • Techniques for reducing the data going over the wire (by 95% in my example!)
  • jQuery + HTTP handlers
    • Why/how
    • Returning simple data
    • Returning complex data as JSON

You can download my slide deck and code samples from:

http://dl.dropbox.com/u/11342240/ChrisOBrien_jQueryAJAXSP2010_SamplesAndDeck.zip

Big thanks to Mark Stokes for hosting the event and inviting me to speak.

6 comments:

weeble said...

It was a good talk, thanks for the slides :)

Claire said...

Thanks for that tip on putting jquery in no-conflict mode--I hadn't known about that!

Tonyp said...

Thanks for the talk, it was very interesting and I think everyone went away with some new ideas!

Dane said...

good talk.. deployed your solution and seems to work in firefox but not in IE?

Chris O'Brien said...

@Dane,

Thanks for this - I took a look and you're right (as you saw during the talk, I often use Firefox whilst developing such code as I like the tooling). It turned out to be a simple HTML issue where IE8 (at least) didn't like self-closing SPAN tags e.g. <span id='blah' /> - I changed these to <span id='blah'></span> and things work fine.

I uploaded the corrected files to the original link, so either re-download or make the same changes in the version you already have.

Sorry for the inconvenience!

Cheers,

Chris.

S. Tenenbaum said...

Chris,

Your content deployment for 2007 and this blog introducing me to jquery in 2010 are SO Special!

Your contributions to SharePoint are invaluable.

Sara