Question

var intervalID;
function autoUpdateFeed() 
{
    if( document.autoupdatefeedform.autoupdatefeed.checked == true )
    {
        intervalID = setInterval(updateFeed, 1000);
    } else {
        clearInterval(intervalID);
    }
}
function updateFeed()
{
    var oRequest;
    try {
            oRequest=new XMLHttpRequest();
        } catch (e)   {
        try {
            oRequest=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
            try {
                oRequest=new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("Your browser does not support AJAX!");
                    return false;
                }
             }
        }
        oRequest.onreadystatechange=function()
    {
        if(oRequest.readyState==4)
        {
        //Start of problem.
            var newfeedstable = document.getElementById("newfeeditems");
            var newcontent = document.createElement('tr');
            newcontent.innerHTML = oRequest.responseText;
            while (newcontent.firstChild)
        {
                newfeedstable.insertBefore(newcontent.firstChild, newfeedstable.firstChild);
            }
        //End of problem.
        }
    }
    oRequest.open("GET","back/newsfeedlatest.php",true);
    oRequest.send(null);
}

Here is the JavaScript code I and my friend are currently using to add new status updates to a table for new status updates on our work-in-process social networking site, the problem is when the new elements are added to the table, they tile to the side, instead of tiling downwards, so I need to know why this is happening and how to fix it, any ideas? For more information, look at the website, you may have to make an account but feel free to use a fake email until we start using email activation again. http://friendgrid.com/
Here’s a screenshot of the problem for further reference: http://dl.dropbox.com/u/2281426/Newsfeed%20Error.bmp

Answer 1

The issue would be at the line inside the While:

newfeedstable.insertBefore(newcontent.firstChild, newfeedstable.firstChild);

There the first parameter should be only newcontent without the .firstChild, the firstChild would be inserting only that element and not the newly created <TR>

Altough i suggest you to use DOM methods to modify tables, something easier like:

TableElement.insertRow( 0).innerHTML = oRequest.responseText;

TableElement in your case would be newfeedstable, which if you don’t need it later you could reduce to:

document.getElementById("newfeeditems").insertRow( 0).innerHTML = oRequest.responseText;

The 0 as parameter would make the insert always as first row, use a -1 to insert always as last row.