Home > JavaScript, jQuery, SharePoint > SharePoint 2010: var $ conflict between CMSSiteManager.js and jQuery

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

November 6th, 2010 Leave a comment Go to comments

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
});

  1. Jacinto
    November 20th, 2012 at 13:06 | #1

    Thank you! You saved me so much time! Thought it had something to do with jquery js loading sequence.

  1. June 1st, 2012 at 05:36 | #1