By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,079 Members | 927 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,079 IT Pros & Developers. It's quick & easy.

populating a drop down with Ajax? IE problems.

P: 27
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.responseText, 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:330px; height:600px; float:left;">
<div>
<form id="pestForm" action="fruit.php?option=report" method="post">
<fieldset style="width:280px;">
<legend>Pest</legend>
<div id="error"><?php echo $_SESSION[error]; ?></div>
<p>
<label for="pest">Pest</label>
<select style="width:170px;" id="pest" name="pest" >
<option value="">Select Pest</option>
</select>
</p>
<p>
<label for="biodate">Biofix 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">End 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="buttonbox">
<input type="submit" name="pSubmit" value="Submit" onclick="if (pestCheck() == false) return false;" />
<input type="reset" />
<input type="button" onclick="location.href='index.php'" value="Back" />
</div>
</fieldset>
</form>
</div>
</div>
[/php]


javascript used when a location is clicked
Expand|Select|Wrap|Line Numbers
  1. // This function is called each time a station marker is added
  2. // it formats the station's tooltip and adds event listeners for click, hover, etc.
  3. function formatMarker(station) {
  4.    var num = station.stn_num;
  5.    var name = station.stn_name;
  6.    var div_width = (7.9 * name.length) + 48;
  7.    if(div_width < 110) div_width = 110;
  8.    station.tooltip = "<div id=\"tooltip\" style=\"width:" + div_width + "px\">Num:"+num+'<br/>Name: ' + name + '</div>';
  9.  
  10.    // Add listener for marker click events
  11.    // if a station icon is clicked, its corresponding id is displayed
  12.    GEvent.addListener(station, "click", function() {
  13.          setPest();
  14.    });
  15.  
  16.    // Add listener for marker hover events
  17.    // if the user hovers over a station icon, information about the station is displayed
  18.    GEvent.addListener(station,"mouseover", function() {
  19.          showTooltip(station);
  20.    });
  21.    GEvent.addListener(station,"mouseout", function() {
  22.          globaltooltip.style.visibility="hidden";
  23.    });
  24.    return station;
  25. }
  26.  
  27. function setPest() {
  28.    var xmlHttp = false;
  29.    try {
  30.       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  31.    } catch (e) {
  32.       try {
  33.          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  34.       } catch (e) {
  35.          xmlHttp = false;
  36.       }
  37.    }
  38.  
  39.    if (!xmlHttp && typeof XMLHttpRequest!='undefined') {
  40.       try {
  41.          xmlHttp = new XMLHttpRequest();
  42.       } catch (e) {
  43.          xmlHttp = false;
  44.       }
  45.    }
  46.  
  47.    if (!xmlHttp && windos.createRequest) {
  48.       try {
  49.          xmlHttp = window.createRequest();
  50.       } catch (e) {
  51.          xmlHttp = false;
  52.       }
  53.    }
  54.  
  55.    //xmlHttp.overrideMimeType('text/xml');
  56.  
  57.    var url = "includes/ajax.php";
  58.  
  59.    xmlHttp.onreadystatechange=function() {
  60.       if(xmlHttp.readyState==4) {
  61.          //alert(xmlHttp.resonseText);
  62.             var spanElement = document.getElementById('pest');
  63.             spanElement.innerHTML = '';
  64.             try {
  65.                spanElement.innerHTML = xmlHttp.responseText;
  66.             } catch (e) {
  67.                var wrappingElement = document.createElement('div');
  68.                wrappingElement.innerHTML = xmlHttp.responseText;
  69.                spanElement.appendChild(wrappingElement);
  70.             }
  71.       }
  72.    }
  73.  
  74.    xmlHttp.open("POST",url,true);
  75.    xmlHttp.send(null);
  76. }
  77.  
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($result)) {
$name = htmlentities(trim($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
http://beta.climate.usurf.usu.edu/fruit.php
May 19 '08 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
The link isn't working, so can you show how you call formatMarker()?
May 20 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.