<html><body><div style="color:#000; background-color:#fff; font-family:times new roman, new york, times, serif;font-size:12pt"><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt;">Thanks for suggestion,</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt;">it helps me to understand what I want to do :)</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt;"><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;">I used this strategy instead:</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;"><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0);
background-color: transparent; font-style: normal;"><code></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;"><br></div><div style="background-color: transparent;"> getfeatures_popup_sub_ugm = {</div><div style="background-color: transparent;"> 'featureselected':function(evt){</div><div style="background-color: transparent;"> var feature = evt.feature;</div><div style="background-color: transparent;"> var popup = new OpenLayers.Popup.FramedCloud("popup",</div><div style="background-color: transparent;">
feature.geometry.getBounds().getCenterLonLat(),</div><div style="background-color: transparent;"> new OpenLayers.Size(400, 400),</div><div style="background-color: transparent;"> $.ajax({ type: "GET", url: '/' + 'webgis' +'/popup/subugm/' + feature.attributes.id, async: false }).responseText,</div><div style="background-color: transparent;"> null,</div><div style="background-color: transparent;"> true, // closeBox</div><div style="background-color: transparent;">
deseleziona // a custom function...</div><div style="background-color: transparent;"> );</div><div style="background-color: transparent;"> feature.popup = popup;</div><div style="background-color: transparent;"> map.addPopup(popup);</div><div style="background-color: transparent;"> </div><div style="background-color: transparent;"> // chiamo la funzione che mi costruisce il grafico</div><div style="background-color: transparent;">
produce_subugm_popup_graph();</div><div style="background-color: transparent;"> </div><div style="background-color: transparent;"> },</div><div style="background-color: transparent;"> 'featureunselected':function(evt){</div><div style="background-color: transparent;"> var feature = evt.feature;</div><div style="background-color: transparent;"> map.removePopup(feature.popup);</div><div style="background-color: transparent;"> feature.popup.destroy();</div><div style="background-color:
transparent;"> feature.popup = null;</div><div style="background-color: transparent;"> }</div><div style="background-color: transparent;"> } </div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;"><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;"></code></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt;"><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style:
normal;">where the function produce_subugm_popup_graph() were called after popup creation.</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;">It simply attach a jquery widget on a DOM item.</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;">It works as expected,</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;">any suggestions will be appreciate</div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0, 0, 0); background-color: transparent; font-style: normal;"><br></div><div style="font-family: 'times new roman', 'new york', times, serif; font-size: 16px; color: rgb(0,
0, 0); background-color: transparent; font-style: normal;"><br></div> <div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt;"> <div style="font-family: 'times new roman', 'new york', times, serif; font-size: 12pt;"> <div dir="ltr"> <hr size="1"> <font size="2" face="Arial"> <b><span style="font-weight:bold;">Da:</span></b> Greg Allensworth <gregor@greeninfo.org><br> <b><span style="font-weight: bold;">A:</span></b> Giuseppe De Marco <peppelinux@yahoo.it> <br><b><span style="font-weight: bold;">Cc:</span></b> "openlayers-users@lists.osgeo.org" <openlayers-users@lists.osgeo.org> <br> <b><span style="font-weight: bold;">Inviato:</span></b> Mercoledì 11 Settembre 2013 18:14<br> <b><span style="font-weight: bold;">Oggetto:</span></b> Re: [OpenLayers-Users] jquery code execution inside a framedCloud popup<br> </font> </div> <div class="y_msg_container"><br>On 9/11/2013 7:37 AM, Giuseppe De Marco
wrote:<br>> I need to execute code that's normally executed inside the <head> </head>.<br>> This code should rapresent a javascript chart inside the popup.<br><br>When you instantiate the Popup, you pass it a DOM ID. This ID is given <br>po the DIV containing the content, so you can use <br>document.getElementById() or $('#id') as usual.<br><br>When constructing the HTML, you can also include class= and id= <br>attributes, and then refer to them with your usual techniques.<br><br>This pseudocode illustrates the point:<br><br>// step 1: create the popup and add it to the map<br>// note that the popup will have DOM ID "mypopup"<br>var html = '<p>' + point.title + '</p>';<br>html += '<div id="popup_text" class="popup_content">';<br>html += 'This is the dot!';<br>html += '</div>';<br><br>popup = new OL.FramedCloud('mypopup', html, latlon);<br>MAP.addPopup(popup);<br><br>// step 2: there now exist DOM elements<br>//
with id "mypopup" and "popup_text"<br>// and we can continue manipulating them as usual<br><br>document.getElementById('popup_text').innerHTML = 'What dot?';<br><br>document.getElementById('mypopup').style.color = 'red';<br><br>$('.popup_content').css({ 'background-color':'blue' });// jQuery<br><br><br><br>Another approach, if you're big on jQuery *and* you want to attach event <br>handlers and other complex behaviors, is this: first, create the entire <br>jQuery structure, add actions and handlers, then use .append() to move <br>that element into the popup bubble.<br><br>Example (again, fake code):<br><br>// step 1: a popup with empty content<br>popup = new OL.FramedCloud('mypopup', '', latlon);<br>MAP.addPopup(popup);<br><br>// step 2: create the stuff that we want inside the bubble<br>// with event handlers and all<br><br>var content = $('<div></div>');<br>content.click(function () {<br> alert('You clicked me!' +
$(this).data('secret_message') );<br>});<br>content.data('secret_message', 'this is inside a data tag');<br>content.appendTo( $('#mypopup') );<br><br><br>The biggest gotcha I have encountered with this technique, is that the <br>popup DIV was created and placed onto the map back when it had no <br>content, so the new content is larger than the popup's expected size.<br><br>Workarounds for this include: a) setting an explicit size when you <br>create the Popup, b) using CSS on e.g. "#mypopup div", and c) using <br>jQuery to assign a width and height to the content after you have <br>constructed it.<br><br><br>I hope that helps. I use this technique for doing jQuery accordions, D3 <br>charts, dynamically-determined IMG tags, etc. within popups.<br><br><br>-- <br>Greg Allensworth, Web GIS Developer<br>BS A+ Network+ Security+ Linux+ Server+<br>GreenInfo Network - Information and Mapping in the Public Interest<br>564 Market
Street, Suite 510 San Francisco CA 94104<br>PH: 415-979-0343 x302 FX: 415-979-0371 email: <a ymailto="mailto:gregor@greeninfo.org" href="mailto:gregor@greeninfo.org">gregor@greeninfo.org</a><br>Web: www.GreenInfo.org www.MapsPortal.org<br><br>Subscribe to MapLines, our e-newsletter, at www.GreenInfo.org<br><br><br></div> </div> </div> </div></body></html>