Hello Pierre,<br>yes sure, we tryied! <br>Unfortunately the problem was related to ExtJs and Mozilla Firefox 3, not to $ function.<br>Anyway what you indicate remains the only solution for using OpenLayers and jQuery library together (unless you want to change the name of $ function in OL or in jQuery).<br>
Thank you very much!<br><br>Fabio D'Ovidio<br><br><div class="gmail_quote">2009/3/12 Pierre GIRAUD <span dir="ltr"><<a href="mailto:bluecarto@gmail.com">bluecarto@gmail.com</a>></span><br><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Hi Fabio,<br>
<br>
This might be stupid but did you try the following ?<br>
<br>
var map = new OpenLayers.Map('map');<br>
<br>
OpenLayers.Map constructor can be given either a DOM Element or the id<br>
of a DOM Element.<br>
<br>
Hope this helps,<br>
Pierre<br>
<div><div></div><div class="h5"><br>
<br>
On Wed, Mar 11, 2009 at 5:46 PM, Fabio D'Ovidio <<a href="mailto:fabiodovidio@gmail.com">fabiodovidio@gmail.com</a>> wrote:<br>
> Hello,<br>
> in order to use jquery library toghether with mapfish client i try to<br>
> summarize the problems related to:<br>
><br>
> * $ function definition in OpenLayers<br>
> * Extjs usage with jquery<br>
><br>
> OpenLayers uses part of prototype library (without include it) in the<br>
> following files:<br>
><br>
> * Util.js<br>
> * Ajax.js<br>
> * Events.js<br>
> * Calss.js<br>
><br>
> In particular in Util.js $ function is defined as following:<br>
> /**<br>
> * Maintain $() from prototype<br>
> */<br>
> if ($ == null) {<br>
> var $ = OpenLayers.Util.getElement;<br>
> }<br>
><br>
> jQuery library also define a $ function as: $ = jQuery<br>
><br>
> Than, jQuery library is shipped with ExtJS, and MapFish ships with<br>
> ExtJS. In particular ExtJS does not load jQuery dynamically, you need to<br>
> include it in your HTML<br>
> with script tags in this order:<br>
><br>
> 1. jquery.js<br>
> 2. ext-jquery-adapter.js<br>
> 3. ext-all.js (or your choice of files)<br>
><br>
> Now, my HTML script with script tags is as following:<br>
><br>
> viewport:null;<br>
> map:null;<br>
><br>
> // reference local blank image<br>
> Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif';<br>
><br>
> Ext.onReady(function(){<br>
><br>
> var map = new OpenLayers.Map(*$('map')*);<br>
> this.map = map;<br>
><br>
> var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",<br>
> "<a href="http://labs.metacarta.com/wms/vmap0" target="_blank">http://labs.metacarta.com/wms/vmap0</a>", {layers: 'basic'},<br>
> {buffer: 0});<br>
><br>
> map.addLayers([wms]);<br>
> map.addControl(new OpenLayers.Control.LayerSwitcher());<br>
> map.setCenter(new OpenLayers.LonLat(17, 2), 2);<br>
><br>
> var window = new Ext.Window({<br>
> title: 'Map',<br>
> width: 500,<br>
> height: 300,<br>
> minWidth: 300,<br>
> minHeight: 200,<br>
> layout: 'fit',<br>
> plain: true,<br>
> bodyStyle: 'padding:5px;',<br>
> items: [{<br>
> xtype: 'mapcomponent',<br>
> map: map<br>
> }]<br>
> });<br>
> window.show();<br>
><br>
> });<br>
><br>
> and obviously I have a div in HTML template to display the map:<br>
><br>
> <div id="map"></div><br>
><br>
> For all these reasons I must solve two problems:<br>
><br>
> 1. re-name $ function in Util.js<br>
> 2. include js files in the correct way to use mapfish with jQuery<br>
><br>
> So I try in this way:<br>
><br>
> 1. I changed Util.js like this:<br>
><br>
> var jq = OpenLayers.Util.getElement;<br>
><br>
> and my script become:<br>
><br>
> viewport:null;<br>
> map:null;<br>
><br>
> // reference local blank image<br>
> Ext.BLANK_IMAGE_URL =<br>
> '../../mfbase/ext/resources/images/default/s.gif';<br>
><br>
> Ext.onReady(function(){<br>
><br>
> var map = new OpenLayers.Map(*jq('map')*);<br>
> this.map = map;<br>
><br>
> var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",<br>
> "<a href="http://labs.metacarta.com/wms/vmap0" target="_blank">http://labs.metacarta.com/wms/vmap0</a>", {layers:<br>
> 'basic'}, {buffer: 0});<br>
><br>
> map.addLayers([wms]);<br>
> map.addControl(new OpenLayers.Control.LayerSwitcher());<br>
> map.setCenter(new OpenLayers.LonLat(17, 2), 2);<br>
><br>
> var window = new Ext.Window({<br>
> title: 'Map',<br>
> width: 500,<br>
> height: 300,<br>
> minWidth: 300,<br>
> minHeight: 200,<br>
> layout: 'fit',<br>
> plain: true,<br>
> bodyStyle: 'padding:5px;',<br>
> items: [{<br>
> xtype: 'mapcomponent',<br>
> map: map<br>
> }]<br>
> });<br>
> window.show();<br>
><br>
> });<br>
><br>
><br>
> (I tryed also using *jQuery.noConflict();* before my script<br>
> without changing Util.js file)<br>
><br>
> 2. I included in my script JS files in this order:<br>
> jquery.js,\<br>
> ext-jquery-adapter.js,\<br>
> ext-all.js<br>
><br>
> and the error is:<br>
> "A[C.xtype || D] is not a constructor"<br>
> that deals with ExtJS (maybe on onReady event, I read this post:<br>
> <a href="http://extjs.com/forum/showthread.php?t=53502&highlight=onready+onload" target="_blank">http://extjs.com/forum/showthread.php?t=53502&highlight=onready+onload</a>)<br>
><br>
> If I don't chage Util.js (or use *jQuery.noConflict() function*) I have<br>
> the following error:<br>
><br>
> "this.div.appendChild is not a function"<br>
><br>
> because:<br>
> 1) I load up jQuery, this defines the $ function<br>
> 2) I load OpenLayers, this checks if $ exists, and because it does exist,<br>
> it is not redefined in the OL (prototype) way<br>
> 3) I initialize my map and send it the string 'map' as the first<br>
> argument<br>
> 4) OpenLayers tries to place your map in the DOM element $('map'), but<br>
> because $() is still a jQuery function that doesn't return a DOM element,<br>
> and I get the error about appendChild not being defined!<br>
><br>
> How can I solve these problems? :-(<br>
> Please, help me if you can :-)<br>
><br>
> Thank you very much!!<br>
><br>
> --<br>
> Fabio D'Ovidio<br>
> Geospatial solutions<br>
><br>
> INOVA s.r.l.<br>
> Web : <a href="http://www.inovaos.it" target="_blank">http://www.inovaos.it</a><br>
> Tel.: 081 197 57 600<br>
> mail: <a href="mailto:fabiodovidio@gmail.com">fabiodovidio@gmail.com</a><br>
><br>
</div></div>> _______________________________________________<br>
> Users mailing list<br>
> <a href="mailto:Users@openlayers.org">Users@openlayers.org</a><br>
> <a href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a><br>
><br>
<font color="#888888"><br>
<br>
<br>
--<br>
Pierre GIRAUD<br>
<a href="http://www.camptocamp.com" target="_blank">http://www.camptocamp.com</a><br>
</font></blockquote></div><br>