I have a page with google maps up and running. When a user clicks on a location from the map I would like to populate a drop down with data from the database related to that location. I have it up and working wonderful. Well that was what I thought until I tried it is IE. All that I get is an empty drop down. I know the problem is related to filling the element with the xmlHttp.respons eText, but no matter how many solution I have tried as suggested by google I still have no luck.
main php page
[php]
<div style="width:33 0px; height:600px; float:left;">
<div>
<form id="pestForm" action="fruit.p hp?option=repor t" method="post">
<fieldset style="width:28 0px;">
<legend>Pest</legend>
<div id="error"><?ph p echo $_SESSION[error]; ?></div>
<p>
<label for="pest">Pest </label>
<select style="width:17 0px;" id="pest" name="pest" >
<option value="">Select Pest</option>
</select>
</p>
<p>
<label for="biodate">B iofix Date</label>
<input type="text" id="biodate" name="biodate" value="<? echo '01/01/' . date('Y'); ?>" size="10" maxlength="10" />
<input type="button" style="border-width: 0px; height: 17px; width: 19px; background-image: url('/img/calendar1.gif') ;
</p>
<p>
<label for="enddate">E nd Date</label>
<input type="text" id="enddate" name="enddate" value="<? echo date("m/d/Y"); ?>" size="10" maxlength="10" />
<input type="button" style="border-width: 0px; height: 17px; width: 19px; background-image: url('/img/calendar1.gif') ;
</p>
<div class="buttonbo x">
<input type="submit" name="pSubmit" value="Submit" onclick="if (pestCheck() == false) return false;" />
<input type="reset" />
<input type="button" onclick="locati on.href='index. php'" value="Back" />
</div>
</fieldset>
</form>
</div>
</div>
[/php]
javascript used when a location is clicked
php code that queries the database includes/ajax.php
[php]
<?php
$query = "SELECT pest_id, name FROM pests;";
$result = pg_query($query );
header("Content-type: text/xml");
$pest .= "<option value=''>Select Pest</option>\n";
while($info = pg_fetch_row($r esult)) {
$name = htmlentities(tr im($info[1]));
$pest .= "<option value='$info[0]' >$name</option>\n";
}
echo $pest;
exit;
?>
[/php]
You help is welcome.
Here is the link if you want to try to see my problem. The error is only seen in IE
main php page
[php]
<div style="width:33 0px; height:600px; float:left;">
<div>
<form id="pestForm" action="fruit.p hp?option=repor t" method="post">
<fieldset style="width:28 0px;">
<legend>Pest</legend>
<div id="error"><?ph p echo $_SESSION[error]; ?></div>
<p>
<label for="pest">Pest </label>
<select style="width:17 0px;" id="pest" name="pest" >
<option value="">Select Pest</option>
</select>
</p>
<p>
<label for="biodate">B iofix Date</label>
<input type="text" id="biodate" name="biodate" value="<? echo '01/01/' . date('Y'); ?>" size="10" maxlength="10" />
<input type="button" style="border-width: 0px; height: 17px; width: 19px; background-image: url('/img/calendar1.gif') ;
</p>
<p>
<label for="enddate">E nd Date</label>
<input type="text" id="enddate" name="enddate" value="<? echo date("m/d/Y"); ?>" size="10" maxlength="10" />
<input type="button" style="border-width: 0px; height: 17px; width: 19px; background-image: url('/img/calendar1.gif') ;
</p>
<div class="buttonbo x">
<input type="submit" name="pSubmit" value="Submit" onclick="if (pestCheck() == false) return false;" />
<input type="reset" />
<input type="button" onclick="locati on.href='index. php'" value="Back" />
</div>
</fieldset>
</form>
</div>
</div>
[/php]
javascript used when a location is clicked
Code:
// This function is called each time a station marker is added
// it formats the station's tooltip and adds event listeners for click, hover, etc.
function formatMarker(station) {
var num = station.stn_num;
var name = station.stn_name;
var div_width = (7.9 * name.length) + 48;
if(div_width < 110) div_width = 110;
station.tooltip = "<div id=\"tooltip\" style=\"width:" + div_width + "px\">Num:"+num+'<br/>Name: ' + name + '</div>';
// Add listener for marker click events
// if a station icon is clicked, its corresponding id is displayed
GEvent.addListener(station, "click", function() {
setPest();
});
// Add listener for marker hover events
// if the user hovers over a station icon, information about the station is displayed
GEvent.addListener(station,"mouseover", function() {
showTooltip(station);
});
GEvent.addListener(station,"mouseout", function() {
globaltooltip.style.visibility="hidden";
});
return station;
}
function setPest() {
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest!='undefined') {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp && windos.createRequest) {
try {
xmlHttp = window.createRequest();
} catch (e) {
xmlHttp = false;
}
}
//xmlHttp.overrideMimeType('text/xml');
var url = "includes/ajax.php";
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
//alert(xmlHttp.resonseText);
var spanElement = document.getElementById('pest');
spanElement.innerHTML = '';
try {
spanElement.innerHTML = xmlHttp.responseText;
} catch (e) {
var wrappingElement = document.createElement('div');
wrappingElement.innerHTML = xmlHttp.responseText;
spanElement.appendChild(wrappingElement);
}
}
}
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}
[php]
<?php
$query = "SELECT pest_id, name FROM pests;";
$result = pg_query($query );
header("Content-type: text/xml");
$pest .= "<option value=''>Select Pest</option>\n";
while($info = pg_fetch_row($r esult)) {
$name = htmlentities(tr im($info[1]));
$pest .= "<option value='$info[0]' >$name</option>\n";
}
echo $pest;
exit;
?>
[/php]
You help is welcome.
Here is the link if you want to try to see my problem. The error is only seen in IE
Comment