SharePoint 2010 jQuery compatibility errors – cmssitemanager.js

Recently I used a site collection scoped feature to add jQuery support to a SharePoint 2010 site collection. As documented on countless blogs, I used custom action XML similar to the following:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    ScriptSrc="JqueryCustomAction/jquery-1.4.2.min.js"
    Location="ScriptLink"
    Sequence="100">
  </CustomAction>
</Elements>

Everything seemed to work as intended. Only later did I notice strange JavaScript errors in the SharePoint interface. The most common errors were in a file called cmssitemanager.js when using the Asset Picker dialog as part of a publishing site:

It turns out that SharePoint 2010 has JavaScript that registers a global function named “$”. This conflicts with the same global function which is registered by jQuery and is used as shorthand for the various jQuery functions.

My very quick solution was to reference a second JavaScript file in my custom action. This JavaScript file disables the “$” shorthand function for jQuery. This fixes all the compatibility issues with the only downside being that you now have to replace “$” with “jQuery” when referring to jQuery globally.

Updated script references:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    ScriptSrc="JqueryCustomAction/jquery-1.4.2.min.js"
    Location="ScriptLink"
    Sequence="100">
  </CustomAction>
  <CustomAction
    ScriptSrc="JqueryCustomAction/jquery-noconflict.js"
    Location="ScriptLink"
    Sequence="105">
  </CustomAction>
</Elements>

No conflict JavaScript:

// this puts jquery into no conflict mode which will remedy conflicts caused by jQuery when used
// with certan publishing features
jQuery.noConflict();

Below is a minimal Visual Studio 2010 solution that contains a site collection scoped jQuery feature.

Visual Studio 2010 Solution – SharePoint 2010 & jQuery