HI All,
This is more of a php / ajax question. I am building this with php and then will transfer over to modx. I am having problems successfully finishing the proof of concept though. I have a page that makes a request from a php page in order to dynamically update the option values in a select. It works fine in firefox, safari, chrome, but not in IE. the html is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; />
<meta name="robots" content="index,follow" /><meta name="revisit-after" content="5 Days" />
<title> delivery | Young's Bicycle Shop</title>
<link href="assets/css/master.css" rel="stylesheet" type="text/css" />
<link href="assets/css/colorbox/colorbox.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function showStreet()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("street").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","streetOptions.php?street=*", true);
xmlhttp.send();
}
</script>
</head>
<body style="background: #222;" onload="showStreet()" >
<div style="background: #222;width: 100%;position: relative;">
<div style="display: block;clear: both;position: relative;width: 40%; float: left;">
<form id="addTask1" action="#">
<h1 id="editH1" style="color:#F0E16C;font-weight: bold;font-size: 1.5em;font-family: helvetica,calibri, arial, sans-serif">CLICK HERE TO EDIT</h1>
<p style="padding: 1em 0em 1em 15px;width: 80%;background-color: #555;" id="editParagraph">
<label style="color:#F0E16C;font-weight: bold;font-size: 0.8em;font-family: helvetica,calibri, arial, sans-serif" id="houseLabel" for="street">Street</label>
<select style="width: 10em;-moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #aaa;padding: 0.25em 8px;color: #222;width: auto;" id="street" name="street">
</select>
</div>
</body>
</html>
and the streetOptions.php page code is
<?php
require("phpsqlinfo_dbinfo.php");
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) { die('Not connected : ' . mysql_error());}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
$sql="SELECT distinct street FROM markers ORDER BY street asc";
$result=mysql_query($sql);
echo '<option value=0>Choose</option>';
while ($row=mysql_fetch_array($result)) {
$street=$row['street'];
echo '<option value="'.$street.'"> '.$street. '</option>';
}
?>
The simple test case is at
http://www.youngsbicycleshop.com/test.php
In IE I see the pull down list length and when I inspect it in the bundled devloper tools I can see all the text values, but they won’t display on the screen. I think it is an innerHTML problem. Any help would be most appreciated.
-Noah
