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?
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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.