Question

I am using this code:

<script type="text/javascript">

        var id = <?php if(is_numeric($_GET['id'])) print $_GET['id']; else print "0"; ?>;
        var startid = id+1;
        var end = false;

        // function for loading one row
        function getRow(rowid)
        {           
          //$.get("unhandled_one_row.php?id=" + rowid, function(data){ if(data!="\n") $('#dash_table > tbody').append(data); else {  } });

          function HttpRequest(url){
          var pageRequest = false; //variable to hold ajax object

          /*
          if (!pageRequest && typeof XMLHttpRequest != 'undefined')
             pageRequest = new XMLHttpRequest();
          */

          if(window.ActiveXObject)  // Internet Explorer  
          { 
            try
            {
              pageRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
              pageRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
          }
          else  // Firefox, Opera, Safari  
          { 
            pageRequest = new XMLHttpRequest();  
          }

          if (pageRequest){ //if pageRequest is not false
             pageRequest.open('GET', url, false); //get page synchronously 
             pageRequest.send(null);
             embedpage(pageRequest);
             }
          }

          function embedpage(request){
          //if viewing page offline or the document was successfully retrieved online (status code=200)
          if (window.location.href.indexOf("http")==-1 || request.status==200)
          {
             if(request.responseText != "\n") document.write(request.responseText);
             else end = true;
          }
          }

          HttpRequest("unhandled_one_row.php?id=" + rowid);
        }

        // function for deleting a row
        function RemoveRow(obj)
        {
          var rws;
          obj=document.getElementById(obj);
          rws=obj.getElementsByTagName('TR');
          obj.removeChild(rws[rws.length-1]);
        }

        // row loading loop
        do
        {
          getRow(id++);
        } while(!end && document.getElementById("dash_table").clientHeight < document.body.clientHeight - 100);

        // avaiable height exceed control
        // deletes one row if the height was exceeded
        if(document.getElementById("dash_table").clientHeight >= document.body.clientHeight - 100)
        {
          RemoveRow('dash_table');
          id--;
        }

It is supposed to dynamically load a table, row by row, while comparing height of the table with available height of the screen and when the available height is reached, the loop stops. This code works just fine in FF of G.Chrome, but in IE the loop cycles indefinitely.

Why?

Answer 1

OK, after hours of trying possible and impossible I found out that IE (unlike FF or G.Chrome) supports dynamic generation of tables using DOM objects. Using document.write function as I did is not a mistake as far as you don’t need tables’ attributes to update after each row added.
After learning this, solution was just a matter of several minutes.

Inside getRow function I put following code:

var content = request.responseText.split(";");

var row = document.createElement("tr");
row.className = content[0];

var cell = document.createElement("td");
cell.innerHTML = content[1];
row.appendChild(cell);

cell = document.createElement("td");
cell.innerHTML = content[2];
row.appendChild(cell);

Let this be the lesson for everyone who will try to generate his table using the easy/lazy way 🙂