[OpenLayers-Users] OpenLayers 2.2 breaks with jQuery

[Daniel Kastl]

Thank you, Tim!
Now it's working again.

Daniel


Tim Schaub wrote:
> 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
>>
>>     
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>