jQuery conflicts between Solspace Primary Categories and LG Live Look, fix and comments

I came across an issue that arose between two add-ons from separate developers, so thought it’d be best to post here for discussion. I’ve been using LG Live Look 1.1.0 (great add-on!) for a while, but found it stopped working once I installed Solspace’s Primary Category 1.6 (another great add-on).

So, both of these add-ons extend the functions of the Publish page, and they both use jQuery / Javascript to do so. The issue I am describing only happens on the Publish page, which is how I narrowed it down to a jQuery / Javascript issue (well, that and I have Firebug on Firefox, so I could see the JS error right away).

Here’s the fix, first of all (in case anyone is looking for this):

1. Find the LG Live Look file, themes/cp_themes/default/lg_live_look/js/admin_publish.js

2. Add one line of code at the top of the file

Before:

h = $.cookie("lg_live_look_h");

After:

$ = jQuery.noConflict();
h = $.cookie("lg_live_look_h");

Some explanation / comments:

Solspace, in their plugin are doing this:

$j = jQuery.noConflict();

This ends-up happening on the Publish page code before Live Look’s code (from admin_publish.js) is loaded. So, in doing this, Solspace is effectively turning off the $ that Live Look wants to use in its script.

I work a lot with jQuery, and appreciate the power of noConflict. But, there are some consequences to using noConflict too–especially in an environment like EE where different add-ons are inserting JS independent of each other.

Note: it might be useful if EllisLab were to offer some guidelines for how to use jQuery in the EE Control Panel with regards to $ – it might be tough depending on whether all EE control panel add-ons that use JS should be expected to use jQuery, or whether you want to allow other libraries to be used …

In any case, unless EllisLab wants people to do otherwise, it’s probably wise for ALL add-ons that use jQuery to issue a

$ = jQuery.noConflict()

at the start of their code. In this way, the add-on is making sure that $ (or some other symbol) is really jQuery, and not something else, and not turned off by some earlier add-on.