$ in openlayers lib conflicts with jquery

[jpulles]

The $ function defined in Util.js of the OpenLayers library conflicts with the $ function in the jQuery library. This happens when OpenLayers is integrated with the Drupal CMS and is noticeable in IE (see eg  http://aardbodem.nl/node/3 which uses the svn version of OpenLayers).

I have a simple patch attached that removes the $ function from Util.js. The $ function is not used in the library itself, but only in tests and examples. Thus, it would be preferred if it is only defined in the tests and examples.

[jpulles]

patch for Util.js that removes the $ definition

[crschmidt]

jpulles:

I don't understand why this is a problem.

• If jQuery is loaded before OpenLayers, $ should be defined before OL is, which means that we won't redefine it.
• If jQuery is loaded after OpenLayers, it should clobber the "$".

Can you tell me why these are not happening?

The $ will likely not be going away entirely before 3.0, since many applicatinos using the 2.x series are using it.

[jpulles]

Replying to crschmidt:

jpulles: I don't understand why this is a problem. * If jQuery is loaded before OpenLayers, $ should be defined before OL is, which means that we won't redefine it. * If jQuery is loaded after OpenLayers, it should clobber the "$". Can you tell me why these are not happening? The $ will likely not be going away entirely before 3.0, since many applicatinos using the 2.x series are using it.

The problem only occurs in Internet Explorer. Firefox apparently loads the javascript files in the correct order, but IE has a problem doing that. Although jquery.js is above openlayers.js in the head section, the $ is defined by OpenLayers. From  http://blogs.msdn.com/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx: "... but Internet Explorer will execute the scripts in the order they finish downloading in whereas Firefox downloads them asynchronously but still executes them in the order they are attached in the DOM."

[ahocevar]

Replying to jpulles:

The problem only occurs in Internet Explorer. Firefox apparently loads the javascript files in the correct order, but IE has a problem doing that. Although jquery.js is above openlayers.js in the head section, the $ is defined by OpenLayers. From  http://blogs.msdn.com/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx: "... but Internet Explorer will execute the scripts in the order they finish downloading in whereas Firefox downloads them asynchronously but still executes them in the order they are attached in the DOM."

Yes, the script loading order is a problem in IE. If you want to make sure that you use the jquery $ function, you should add the following at the top of your onload method:

window.$ = function(selector, context) {
    return new jQuery.prototype.init(selector, context);
}

This is just a re-definition of the jquery $ function.

[jpulles]

Replying to ahocevar:

Yes, the script loading order is a problem in IE. If you want to make sure that you use the jquery $ function, you should add the following at the top of your onload method: {{{ window.$ = function(selector, context) { return new jQuery.prototype.init(selector, context); } }}} This is just a re-definition of the jquery $ function.

Thank you for the tip. I now changed it to "window.$ = window.jQuery;" which has the same effect.

[crschmidt]

I still don't understand: *either* order tha it is loaded in, jQuery should still work. Am I right? Unless jQuery checks whether anything has defined "$" and doesn' set it if so, in which case, that would be a problem.

I'm also curious as to whether adding a 'defer=defer' to the OpenLayers.js is enough to push the loading later, until after jQuery is loaded...

[openlayers]

This page in the jQuery documentation may be of assistance:  http://docs.jquery.com/Using_jQuery_with_Other_Libraries

[euzuro]

Mass ticket move out of 2.7 in preparation for a release plan.

If you are actively working on this task, and think that you can help this ticket to get finished and closed by September 1, please move it back to 2.7.

[euzuro]

Moving this to 2.8 unless someone shows signs of actually wanting to fix this.

[crschmidt]

Not touched since 2.7, bumping.

[tschaub]

So, as far as I can tell, this is very wrong behavior in IE. I'm imagining it has to do with functions being evaluated before code is executed, but the conditional assignment of OpenLayers.Util.getElement (in var $ = OpenLayers.Util.getElement;) is actually causing window.$ to be set to undefined.

The solution is for us to conditionally set window.$ instead of using the var $ = ... expression.

[tschaub]

don't clobber $ (even in IE)

[tschaub]

The new test fails in IE (6, 7, and 8) without the change to Util.js. The test passes in the same after the change to Util.js. (Note that there are tests failing in IE, just not the new one - see #2098).

Though this is not a regression, if 2.8 is waiting on a fix for #2054, I think this change is trivial (yet significant) enough to warrant inclusion.

[crschmidt]

Agreed, and reviewed. Thanks, Tim! Mark pullup, it'll go into the next RC.

[tschaub]

(In [9400]) Take care not to clobber any previously set window.$ value. IE, in its mysterious ways, sets $ to undefined if we have a conditional 'var $ = somefunc;' expression - even if the condition evaluates to false. Problem does not occur if expression is 'window.$ = somefunc;'. This makes OL play nicely with jQuery (among others) in IE. r=crschmidt (pullup #1391)

[crschmidt]

(In [9406]) Pullups for OL 2.8 RC3.

jQuery lib fix (Closes #1391) getRenderedSize regression (Closes #1906) element.scrolls error with panzoombar (Closes #2054) createUrlObject bug (Closes #2060) google layer in late rendered maps (Closes #2075) IE6/Lang.nb bug (Closes #2093) Layer.TMS/TileCache bugs (Closes #2099) (Closes #2100) Graphic names issues (Closes #2101)