JSP + ajx : updating div using innerhtml problem

In my main page I have a div:

<div id = "content"><%@include file ="loadData.jsp" %></div>

The loadData.jsp has a <table> ... </table> then a div called pager to do the table paging:

<div id"pager"> ... </div>

So, when I click certain link on my main page the ajax will set request to load this loadData.jsp and I will do something like

document.getElementById("content").innerHTML=xmlhttp.responseText;

to update the content of div content. My problem now is it work only on Chrome and Firefox, then when run in IE has this unknown runtime error. I had Google this problem mostly is because the innerhtml because my output has a div call pager. Any solutions? Thanks

var xmlhttp
function loadContent()
{
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
    {
        alert ("Your browser does not support Ajax HTTP");
        return;
    }
    var url="loadData.jsp";
    xmlhttp.onreadystatechange=getOutput;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}
function getOutput()
{
    if (xmlhttp.readyState==4)
    {
        document.getElementById("content").innerHTML=xmlhttp.responseText;
    }
}

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

so in my main file i have this link

 <a href="javascript:loadContent()>All</a>

then have a

<div id = "content"><%@include file ="loadData.jsp" %></div>

So, when i click the link this content will load new data, it works in firefox and chrome but not in IE, inside the loadData i have this

<table width="900" border="0" class="sortable" id="menuTable">
<thead>
  <tr align="left">
      <th width="60">ID</th>
       ...
      <th width="80">...</th>
  </tr>
</thead>
<tbody>

...
</table>
<div id="pager" class="pager">
               <form>
                  <select class="pagesize">
                      <option value="5">5 per page</option>
                      <option value="10" selected>10 per page</option>
                      <option value="15">15 per page</option>
                      <option value="20">20 per pag开发者_高级运维e</option>
                  </select>
              </form>
    </div>

I think your code fine, add some break point or alert messages to know where the problem lies. Then it's better you have a try catch in your code like this.

function GetXmlHttpObject() {
        var xmlHttp;
        try {
                // for firefox, Opera 8.0+, Safari
                xmlHttp = new XMLHttpRequest();
        } catch (e) {
                // InternetExplorer
                try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                        try {
                                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                                alert("Browser does not support AJAX!");
                                return null;
                        }
                }
        }
        return xmlHttp;
}

Also in your getOutput check the xhr status xmlhttp.status==200. Put some alert message in this function so you will see if your code is passing here.