IE innerHTML. Urgent help please

ca87

I am trying to reset an option drop down list using javascript code which works in FF and Safari but don't get anywhere near working in IE which is driving me mad. the problem i know has to do with innerHTML but i don't know how to fix it.

function resetSizesList(){
  var shapeDiv = document.getElementById('pool'); //id of radio buttons
  var sizeList = document.getElementById('size'); //id of select options
  if(shapeDiv.onchange){//one of the 3 available radio button is changed
      sizeList.innerHTML = ""; //clear and reset the option lists

}

hand i call that method here in my html file

<td>
    <div id="shape" class="Pool_Shape">
        <input type="radio" id="pool" value="UKOvalPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Oval Pool<br>
        <input type="radio" id="pool" value="UKRoundPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Round Pool<br>
        <input type="radio" id="pool" value="UKRectangularPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Rectangular Pool<br>

</div>
<div id="Shapes" style="display:none">
    <select id = "size" name ="size_In_Feets">

     </select>

 </div>
 </td>

Please help its urgent. Thanks in advance

johanafm

It's usually wise to stay away from innerHTML since it often causes problems.

This should work, but I don't know if browsers implement it consistently without memory loss (hopefully not, but you never know)

selectElement.length = 0;

So you might prefer

while (selectElement.childNodes.length) {
	selectElement.removeChild(selectElement.firstChild);
}

ca87

Okay, how do i start?

I, totally a novice have manged to design a web application with the priceless help of Johan and others here in the forum which i am really grateful for.

Here is my little web application that works flawlessly with Firefox, Safari and Chrome but mess up in IE 8 and 9.

I have been testing and debugging with IE9 and there are no indication of any error so far. The problem is in the "Select Shape & Size" section of the form. When a shape is selected it should display and populate the select options with sizes but this just doesn't happen in IE.

Here is my PHP script called "selectSize.php" that fetch the sizes from the database

<?php
if(! isset($_SESSION['databaseURL'])){
    include("conf/conf.php");
    $dbConf = new PPConf();
    $databaseURL = $dbConf->get_databaseURL();
    $databaseUName = $dbConf->get_databaseUName();
    $databasePWord = $dbConf->get_databasePWord();
    $databaseName = $dbConf->get_databaseName();


$connection = mysql_connect($databaseURL,$databaseUName,$databasePWord)or die ("Error while connecting to localhost");

$db = mysql_select_db($databaseName,$connection) or die ("Error while connecting to database");

$table = $_REQUEST["Pool_Shape"];
$query = "SELECT * FROM `$table`";
$result = mysql_query($query);
$sizeArray = array('Please select pool size');//I had to initialize the array so this becomes the selected option in the size drop down. Which works fine with all other browsers except IE
$counter = 1;
while($row = mysql_fetch_array($result)){
    $sizeArray[$counter] = $row['sizeMtr'];
    $counter++;
}
echo json_encode($sizeArray);
mysql_close($connection);
 }
?>

Here is the Ajax call to the selectSize.php

function showPoolSize(str){
  var d = document;
  var s = d.getElementById('size');
  if (str==""){
      s.appendChild("");
      return;
  }
  loadScript("selectSize.php?Pool_Shape="+str,function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
          var sizes = eval('('+xmlhttp.responseText+')');
          for (key in sizes) {
              var o = d.createElement('option');
              o.value = key;
              var text = d.createTextNode(sizes[key]);
              o.appendChild(text);
              s.appendChild(o);
          }
      }
      document.getElementById('Shapes').style.display = 'block';
  });
}

Any idea of how to get this working in IE? Please

johanafm

Well, the actual size retrieval and option appending should be working fine as far as I can see, while what I interpret as an intention to clear the size select element of options does not.
That is, if you ever call the function with an empty string as argument, this part should give you an error

var s = d.getElementById('size');
if (str==""){
    s.appendChild("");
    return;
}

domelement.appendChild() takes another domelement, sometimes restricted to some appropriate type, as argument. If you really did want to append an empty string to a select element, that would have to be an option containing an empty string

	if (str==""){
		var o = d.createElement('option');
		o.value='';
		o.appendChild(d.createTextNode(''));
		s.appendChild(o);
		return;
	}

But I entirly fail to see the point of adding empty options. Also, if your intent is to clear out the select element of existing options, it would make more sense to use one of two possibilities to do this that I posted earlier, and use that in the ajax onreadystatechange event handler function instead. Which means you should remove the if block for "if (str ='')" completely.

Without the second line in the code below, you'd continue to add more and more options to the select element each time, rather than replace the previous set of options.

var sizes = eval('('+xmlhttp.responseText+')');
s.options.length = 0;	    // This is one of the two ways I suggested for doing this
for (key in sizes) {

And the full code I used to test yours in IE8, without trouble, was
selectSize.php

header('content-type: text/plain; charset=utf-8');
$sizeArray = array('Please select pool size', 2, 5, 8, 13);
echo json_encode($sizeArray);
exit;

html and javascript

<script type="text/javascript">
function showPoolSize(str){
	var d = document;
	var s = d.getElementById('size');

loadScript("a_test.php?Pool_Shape="+str,function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		var sizes = eval('('+xmlhttp.responseText+')');
		s.options.length = 0;
		for (key in sizes) {
			var o = d.createElement('option');
			o.value = key;
			var text = d.createTextNode(sizes[key]);
			o.appendChild(text);
			s.appendChild(o);
		}
	}
});
}
//Ajax Http request function
function loadScript(url,cfunc){
	 // var xmlhttp = null;
		if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
		}
	else if(window.XMLHttpRequest){// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	else{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	}

	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}

</script>
</head>
<body style="margin: 40px;">
<select id="size"></select>
<input type="button" onclick="showPoolSize('shape1');" value="Fill select"/><br/>
</body>

So as I expected from reading your code, there was no problem in IE8.