innerHTML in IE?

Question

I'm having trouble using innerHTML with my radio type button.

<table align="center">
 <div class='main'>
  <span id="js" class='info'>
   <label><input type="radio" name="js" value="0" size="<?php echo $row['size']; ?>" onclick="js(this.value, this.size);" /><img src="arrowup.png"/></label>
   <br />
   <label><input type="radio" name="js" value="1" size="<?php echo $row['size']; ?>" onclick="js(this.value, this.size);" /><img src="arrowdown.png"/></label>
  </span>
 </div>
</table>

My .js looks like this:

var xmlhttp;

function getVote(a,b) {
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)   {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="js.php";
url=url+"?js="+a;
url=url+"&id="+b;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged() {

  if (xmlhttp.readyState==4) {
  document.getElementById("js").innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject() {
var objXMLHttp=null;
if (window.XMLHttpRequest)   {
  objXMLHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)   {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
return objXMLHttp;
} 

This doesn't work in IE only! Any help?

Answer 1

firstly, pretty sure a DIV directly inside a TABLE is illegal markup.

don't use illegal markup. browsers will respond differently to it (i've recently had Opera ignore some illegal stuff with IE trying to render it).

tho IE usually deserves it, firstly get the markup correct and then see how IE does. it may be that it has failed to render the DOM how you expect.

(FWIW there is an innerHTML rendering problem i've run up against with IE, http://support.microsoft.com/kb/276228/, but for the SELECT element so i don't think it applies here).

Answer 2

The issue was indeed innerHTML on table tag. IE doesn't support innerHTML wrapped around a table tag nor they intend to resolve this issue in their future releases.

The workaround is to either use DOM methods or the easiest way: wrap your table around a div.

So I ended up with:

<div id="js" align="center"><table>
        <span class='main'>
            <a onClick="getVote(this.value, this.size);" type="radio" value="0" size="<?php echo $row['id']; ?>" /><img src="arrowup.png"/></a>
            <br /><a onClick="getVote(this.value, this.size);" type="radio" value="1" size="<?php echo $row['id']; ?>" /><img src="arrowdown.png"/></a>
            </span>
</table></div>

There's another IE bug that screws up the label if they're set to be image. Just a heads up! I know you won't be surprised when I say IE sucks!

Answer 3

I know this is a little late but here is how to fix this issue with jQuery:

$("#tableName").html(DataToWrite);