SharePoint 2010: var $ conflict between CMSSiteManager.js and jQuery

Buta — Sat, 06 Nov 2010 18:27:18 +0000

I ran into an issue recently on a SharePoint 2010 project where a page containing a Thumbnails list view was throwing a JavaScript error. I actually took the wrong path troubleshooting this and burned through a lot of time as a result. I had incorrectly assumed the error had something to do with our custom master page.

Turns out the CMSSiteManager.js library that is used by the Thumbnails list view is also using the $ variable! Argh!

Good thing the plug-in pattern we use only calls $ internally and not globally…

(function($) {
  // plug-in goodness here...
})(jQuery);

Unfortunately our scripts for invoking the plug-ins was referencing $…

$(document).ready(function(){
  $('.foo').samplePlugin();
});

A quick replacement of $ to jQuery did the trick:

jQuery(document).ready(function(){
  jQuery('.foo').samplePlugin();
});

If you have large blocks of inline jQuery code on your page, you’ll probably want to use jQuery.noConflict():

jQuery.noConflict()(function() {
    // code using $ as alias to jQuery
});

Vancouver Tech Fest – Creating jQuery Web Parts for SharePoint

Buta — Sat, 21 Nov 2009 08:51:18 +0000

It’s always fun to have your presentation laptop completely meltdown the night before your presentation!

Anyways, here are the presentation material and code:

Buta no Ie » jQuery

SharePoint 2010: var $ conflict between CMSSiteManager.js and jQuery

Vancouver Tech Fest – Creating jQuery Web Parts for SharePoint