homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
appendChild problems in IE
rsndll




msg:3574072
 6:32 pm on Feb 13, 2008 (gmt 0)

I have the following javascript code that works perfectly in any browser except IE. The xml document provides an array of 'markers' that are iterated through so that a marker is placed on a Google Map and also a text entry (innerHTML) is put in the 'sidebar' div.
The problem I have with IE is that only the first marker text entry of the array is placed in the sidebar. The markers on the map show OK.
Any suggestions?

function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();

var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(51.510887,-0.154582), 12);
return;
}

var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var photo1 = markers[i].getAttribute('photo1');
var inrate1 = markers[i].getAttribute('inrate1');
var outrate1 = markers[i].getAttribute('outrate1');
var age = markers[i].getAttribute('age');
var size = markers[i].getAttribute('size');
var npp = markers[i].getAttribute('npp');
var address = markers[i].getAttribute('address');

var distance = parseFloat(markers[i].getAttribute('distance'));
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));

var marker = createMarker(point, name, address, photo1, age, size, inrate1, outrate1, npp );

var div = document.createElement('div');

sidebar.appendChild(div);

createSidebarEntry(marker, name, distance, div);
map.addOverlay(marker);

bounds.extend(point);
}

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}

function createSidebarEntry( marker, name, distance, div) {

var html = '<b>' + name + '<\/b> (' + distance.toFixed(1) + ' miles)<br>';

div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#333';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#222';
});
div.innerHTML = html;
}

Associated HTML page code:

<td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div> </td>
<td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 400px; margin-left:10px; font-size: 11px; color: #FFF"></div> </td>

 

rsndll




msg:3575029
 5:17 pm on Feb 14, 2008 (gmt 0)

The problem was with this "overflow: auto;". It all works OK in IE now, luckily it wasn't necessary for my application.
The bug is detailed here:
[webbugtrack.blogspot.com...]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved