OpenLayers OpenLayers

Ticket #1391 (new bug)

Opened 9 months ago

Last modified 3 months ago

$ in openlayers lib conflicts with jquery

Reported by: jpulles Assigned to: tschaub
Priority: major Milestone: 2.8 Release
Component: Util Version: SVN
Keywords: jquery drupal Cc:
State: Awaiting User Feedback

Description

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.

Attachments

Util.js.patch (404 bytes) - added by jpulles on 02/25/08 16:23:33.
patch for Util.js that removes the $ definition

Change History

02/25/08 16:23:33 changed by jpulles

  • attachment Util.js.patch added.

patch for Util.js that removes the $ definition

(follow-up: ↓ 2 ) 02/25/08 22:05:27 changed by crschmidt

  • milestone changed from 2.6 Release to 2.7 Release.

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.

(in reply to: ↑ 1 ; follow-up: ↓ 3 ) 02/26/08 03:36:56 changed by 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."

(in reply to: ↑ 2 ; follow-up: ↓ 4 ) 02/26/08 04:27:43 changed by 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.

(in reply to: ↑ 3 ) 03/01/08 03:33:04 changed by 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.

03/01/08 08:09:26 changed by 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...

03/31/08 02:30:23 changed by crschmidt

  • state set to Awaiting User Feedback.

05/11/08 08:30:38 changed by openlayers

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

07/04/08 00:32:36 changed by euzuro

  • milestone changed from 2.7 Release to 2.8 Release.

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.

07/30/08 11:22:53 changed by euzuro

  • owner set to tschaub.
  • milestone changed from 2.8 Release to 2.7 Release.

08/26/08 02:45:16 changed by euzuro

  • milestone changed from 2.7 Release to 2.8 Release.

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