Блог

Я пытался заставить некоторый AJAX-код, который нормально работает в FireFox, работать в IE. Однако у меня возникли некоторые проблемы с обновлением некоторых таблиц в скрипте. Я видел, что у многих других людей были похожие проблемы, но ни одно из найденных ими решений не сработало для меня. Проблема возникает первой на линии

 qe3Table.innerHTML = 
    "<tr>n"  
    "   <th>Name</th>n"  
    "   <th>Status</th>n"  
    "   <th>View Status</th>n"  
    "</tr>n";
  

Где я получаю сообщение об ошибке «‘null’ — это null или не объект»

Я почти уверен, что все мои другие ошибки того же типа, что и эта, мой AJAX-скрипт и некоторые сопутствующие javascript приведены ниже.

 <script type="text/javascript">
<!--
//obtains the box address for a QE3 on the system for the given index
function getQE3BoxAddressHash(index)
{
    var retVal = 0x00000100; //initial value for QE3 boxes
    retVal |= (index amp; 0x000000FF);
    return retVal;
}

//obtains the box address for a QED on the system for the given index
function getQEDBoxAddressHash(index)
{
    var retVal = 0x00001300; //initial value for QED boxes
    retVal |= ((index amp; 0x0000000F) << 4);
    retVal |= ((index amp; 0x000000F0) >> 4);
    return retVal;
}
-->
</script>
<script type="text/javascript">
<!--
var textSocket;
function fillTables()
{
    if(textSocket.readyState != 4)
        return;
    var qe3Table = document.getElementById("QE3_TABLE");
    var qedTable = document.getElementById("QED_TABLE");

    var rawData = textSocket.responseText.split("::::");

    var qe3Data = new Array();
    var qedData = new Array();

    var qe3Index = 0;
    var qedIndex = 0;


    for(var item in rawData)
    {
        if(rawData[item].indexOf("QA") != -1)
        {
            qe3Data[qe3Index  ] = rawData[item];
        }
        else if(rawData[item].indexOf("QED") != -1)
        {
            qedData[qedIndex  ] = rawData[item];
        }
    }


    qe3Table.innerHTML = 
    "<tr>n"  
    "   <th>Name</th>n"  
    "   <th>Status</th>n"  
    "   <th>View Status</th>n"  
    "</tr>n";
    qedTable.innerHTML = 
    "<tr>n"  
    "   <th>Name</th>n"  
    "   <th>Status</th>n"  
    "   <th>View Status</th>n"  
    "</tr>n";

    for(var value in qe3Data)
    {
        var components = qe3Data[value].split("-");
        if(components.length != 3)
            continue;
        qe3Table.innerHTML  = 
        "<tr>n"  
        "   <td>"   components[0]   "-"   components[1]  "</td>n"  
        "   <td>"   
        ((components[2].toUpperCase() === "ONLINE")? 
                "<font color="green"><b>ONLINE</b></font>":
                "<font color="red"><b>OFFLINE</b></font>") 
        "</td>n"  
        "   <td>n <input type="button" onclick="window.location='system_status.php?boxAddress="   getQE3BoxAddressHash(value).toString(16)   "'" value='View Status for "   components[0]   "-"   components[1]  "'></input> </td>n"  
        "</tr>n";
    }
    for(var value in qedData)
    {
        var components = qedData[value].split("-");
        if(components.length != 3)
            continue;
        qedTable.innerHTML  = 
        "<tr>n"  
        "   <td>"   components[0]   "-"   components[1]  "</td>n"  
        "   <td>"   
        ((components[2].toUpperCase() === "ONLINE")? 
                "<font color="green"><b>ONLINE</b></font>":
                "<font color="red"><b>OFFLINE</b></font>") 
        "</td>n"  
        "   <td>n <input type="button" onclick="window.location='system_status.php?boxAddress="   getQEDBoxAddressHash(value).toString(16)   "'" value='View Status for "   components[0]   "-"   components[1]  "'></input> </td>n"  
        "</tr>n";
    }
}

function initAjax()
{
    try
    {
        // Opera 8.0 , Firefox, Safari
        textSocket = new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer Browsers
        try
        {
            textSocket = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                textSocket = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                // Something went wrong
                alert("A browser error occurred.");
                return false;
            }
        }
    }

    textSocket.onreadystatechange=fillTables
}

function reloadTables()
{
    textSocket.open("GET","ajax_scripts/get_connected_boxes.php",true);
    textSocket.send(null);
}

function init()
{
    initAjax();
    reloadTables();
}

window.onload=init();
-->
</script>
  

Проблема, вероятно, в:

 var qe3Table = document.getElementById("QE3_TABLE");
  

Если вы запускаете этот скрипт до загрузки тела, он не будет существовать. Проверьте, есть ли что-нибудь в этой переменной.

Я попробовал оба исправления ваших ребят, но, похоже, они не помогли. В итоге я преобразовал все вызовы формы:

 qe3TableNew.innerHTML = ("<tr>n"  "    <th>Name</th>n"  " <th>Status</th>n"  "   <th>View Status</th>n"  "</tr>n");
  

Для

     var row;
    var cell;
    var text;
    var font;
    row = document.createElement("tr");
    qe3TableNew.appendChild(row);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("Name");
    cell.appendChild(text);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("Status");
    cell.appendChild(text);
    cell = document.createElement("th");
    row.appendChild(cell);
    text = document.createTextNode("View Status");
    cell.appendChild(text);
  

Это, казалось, решило проблему, поэтому я считаю, что это связано с неспособностью IE обрабатывать изменения в innerHTML.

Спасибо за помощь, ребята.

По крайней мере, одна проблема (которая может вызвать вышеуказанные симптомы) — это строка:

 window.onload=init();
  

Подсказка: () оператор немедленно выполняет функцию и вычисляет возвращаемое значение. Это, в свою очередь, может позволить обработчику XHR (в определенных ситуациях) запускаться в то время, когда DOM может быть не готов.

Удачного кодирования.