[OpenLayers-Users] OpenLayers 2.2 breaks with jQuery

[Tim Schaub]

I think this is what is happening:

1) You load up jQuery, this defines the $ function 
2) You define JQ to be the same thing as $
3) You load OpenLayers, this checks if $ exists, and because it does exist,
it is not redefined in the OL (prototype) way
4) You initialize your map and send it the string 'map' as the first
argument
5) OpenLayers tries to place your map in the DOM element $('div'), but
because $() is still a jQuery function that doesn't return a DOM element,
you get the error about appendChild not being defined

So (without knowing anything about jQuery), I think your problem would be
solved if you did this in your second script tag:

JQ = $;
$ = null;

This would let OpenLayers define $ in the way that it wants to (which it
only does if $ == null), which would take your 'map' string and return a DOM
element instead of whatever jQuery returns with $('map').

Regardless of whether this works or not, it does bring up an OpenLayers
issue.  The docs say that the map constructor takes a DOM element as the
first argument.  In practice (and the way the function works), this is
usually a string id for a DOM element instead.

Tim

(Alternatively, it seems like you should be able to load jQuery after
OpenLayers - but it sounds like that didn't do the trick.)

> -----Original Message-----
> From: users-bounces at openlayers.org 
> [mailto:users-bounces at openlayers.org] On Behalf Of Daniel Kastl
> Sent: Tuesday, November 21, 2006 9:17 PM
> To: Daniel Kastl
> Cc: users at openlayers.org
> Subject: Re: [OpenLayers-Users] OpenLayers 2.2 breaks with jQuery
> 
> Hi Brent,
> 
> Sorry, but I missunderstood your answer.
> I also tried your way and changed the order of OpenLayers and 
> jQuery without renaming the $ to JQ, but it didn't help 
> either. Usually the renaming of $ should be the more save 
> way, I think.
> 
> Daniel
> 
> 
> Daniel Kastl wrote:
> > 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
> >>
> >>
> >>     
> >
> > _______________________________________________
> > Users mailing list
> > Users at openlayers.org
> > http://openlayers.org/mailman/listinfo/users
> >
> >   
> 
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>