[OpenLayers-Users] OpenLayers 2.2 breaks with jQuery

Tue Nov 21 23:10:00 EST 2006

Hi Brent,

That's what I did, see:

  <script type="text/javascript" 
src="http://jquery.com/src/jquery-latest.pack.js 
<http://jquery.com/src/jquery-latest.pack.js>"></script>
  <script type="text/javascript">
    JQ = $;  // rename $ function to use jQuery together with Prototype
  </script>
  <script type="text/javascript" src="./2.2/lib/OpenLayers.js"></script>

It was working as expected with 2.1, but with 2.2 it doesn't work 
anymore. I didn't call any jQuery function, just included the lines 
above and it gives an error. In the 2.2 release mail, there was written:

    * Refactoring the use of Prototype.js. Rather than using
Prototype.js, OpenLayers has integrated the important pieces of the
Prototype framework into OpenLayers, and removed offending functions
like Object.extend(). This means that there should no longer be
conflicts between OpenLayers and different versions of Prototype, or
any other Javascript framework.

I guess, it's because of changes to the original Protoype library.

Daniel

Brent Pedersen wrote:
> hi, i havent tried this, but i think you shouldnt have to alias jquery 
> as JQ, just use jQuery (where you'd normally use $), and include it 
> _after_ any prototype/OL stuff.
> the jquery srcipt checks if $ exists, if so, it doesnt create that 
> namespace.
> -brent
>
>
> On 11/21/06, *Daniel Kastl* <daniel.kastl at gmx.de 
> <mailto:daniel.kastl at gmx.de>> wrote:
>
>     Hi list,
>
>     While with version 2.1 of OpenLayers there was no problem to use both
>     OpenLayers' Prototype and jQuery javascript framework, it doesn't work
>     anymore with version 2.2.
>
>     Firebug error message:
>     "this.div.appendChild is not a function" in Map.js (line 136):
>     this.div.appendChild(this.viewPortDiv);
>
>     I followed the jQuery guide how to run jQuery together with Prototype
>     library ( http://jquery.com/docs/PrototypeAndJQuery/)
>
>     I tested with the Wiki example:
>
>     <?xml version="1.0" encoding="UTF-8" ?>
>     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>     "xhtml1-transitional.dtd">
>     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp" lang="jp">
>     <head>
>       <meta http-equiv="Content-type"  content="text/html; />
>       <title>OpenLayers Demo</title>
>
>       <!-- jQuery -->
>       <script type="text/javascript"
>     src="http://jquery.com/src/jquery-latest.pack.js
>     <http://jquery.com/src/jquery-latest.pack.js>"></script>
>       <script type="text/javascript">
>         JQ = $;  // rename $ function to use jQuery together with
>     Prototype
>       </script>
>
>       <!-- OpenLayers -->
>       <script type="text/javascript"
>     src="./2.2/lib/OpenLayers.js"></script>
>     </head>
>
>     <body>
>       <div id="map" style="width:100%;height:100%;"></div>
>       <script defer="defer" type="text/javascript">
>         var map = new OpenLayers.Map('map');
>         var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
>             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
>         map.addLayer(wms);
>         map.zoomToMaxExtent();
>       </script>
>     </body>
>
>     Would be nice somebody knows a solution how to use both,
>     OpenLayers and
>     jQuery.
>
>     Daniel
>
>
>     _______________________________________________
>     Users mailing list
>     Users at openlayers.org <mailto:Users at openlayers.org>
>     http://openlayers.org/mailman/listinfo/users
>
>