PHP/AJAX <Select> innerhtml in IE

[PHPorbust]

Hi,

It appears I ran into the dreaded IE <select> issue with innerhtml.  I have looked at multiple solutions but alas I reach out for help!

The code works beautifully in Safari and Firefox but fails in IE  by simply loading blanks when AJAX is called.

I read up on microsoft.com a DIV may work outside the <select>.  But I must be messing something up.

Thanks for your puzzle solving help!

 

Code:

 

AJAX:

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4) {

var temp=(xmlHttp.responseText);

document.getElementById("option").innerHTML=temp;

      }

}

var queryString = "?page=" + page;                              

xmlHttp.open("GET","AJAX_page.php" + queryString,true);

xmlHttp.send(null);

 

PHP:

<?php

echo "<form action='next.php' method='POST'>";

echo "<select name='id' id='option'><option value=0>Option_0/option>";

{

echo "<option value ='$id'>$choice</option>";

}

echo "</select>";

echo "<input type='submit' value='Submit'></form>";

?>

 

 

[Ivan Ivković]

Since I don't have the full code, I can't try it out.

 

Have you tried this?

 

var xmlhttp;

if (window.XMLHttpRequest)
  { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

 

And... Why are you using a POST form if you're fetching a GET data in AJAX code?

[PHPorbust]

Hi there Ivan,

 

The rest of the AJAX part is the standard, similar to what you posted, indeed.

The POST is the "Select" choice being sent to a processing page unrelated to the AJAX call. 

Everything is good in Firefox, Safari.  I have it down to the issue being an IE bug that exists with innerhtml used in <Select>.

It is documented by Microsoft in fact.  But their solution eludes me

 

 

 

[Ivan Ivković]

Can you give me the code? I'll try to do somethin on my localhost. (I'm learning this too, so let's do it together. )

[kicken]

Replace the entire select box, not just the options list.  Or else replace the options using proper dom methods rather than innerHTML.

 

 

(and use code tags)

<?php
echo "<form action='next.php' method='POST'>";
echo "<div id=\"option\">";
echo "<select name='id'><option value=0>Option_0/option>";
//assuming there is a loop here
echo "<option value ='$id'>$choice</option>";
//end loop
echo "</select>";
echo "</div>";
echo "<input type='submit' value='Submit'></form>";                  
?>

 

Then in your ajax file, just add the select tag to the output.

 

[PHPorbust]

Thank you.  The Div solution works.  There appears to be also an innerhtml=outerhtml solution as well that works.

 

Appreciate the puzzle solving skills.