элемент не удаляется из DOM

Question

У меня есть код для удаления записи из MySQL, отображаемой в таблице через php, и последующего удаления строки таблицы со страницы.Запись удаляется, однако на странице и в DOM ничего не меняется и должно измениться мгновенно.

Вот код JavaScript для удаления из DOM

function deleteItem(layer, url) {
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
                if(xmlHttp.responseText == 'result=true') {
                        var row = document.getElementById(layer);
                        row.parentNode.removeChild(row);
                }

        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
                document.getElementById(layer).innerHTML="loading";
        }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
        deleteItem(layer, url);
    }
}

Который вызывается из php так:

echo '<tr id=\"article_' . $pk . '\">' . "\n";   
echo '<td><a href="#" onclick="deleteRec(\'article_' . $pk .'\', \'' . $pk . '\')">DELETE</a></td>' . "\n"; 

$pk — первичный ключ записи.

Полученный HTML-код в порядке (очевидно, поскольку запись удалена)

<a href="#" onclick="deleteRec('article_260343387801', '260343387801')">DELETE</a>

Но страница никак не обновляется.

Почему?

Answer 1

Я только что добавил ваш код на тестовую страницу, и он работает, когда я удаляю:

 document.getElementById(layer).innerHTML=xmlHttp.responseText;

строка, которая находится непосредственно перед строкой:

} else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {

А document.getElementById(layer).innerHTML=xmlHttp.responseText; вызывает ошибку.

Редактировать:Я просто добавлю, что моя «версия» get_records.php это просто php-страница, echos 'result=true' для моих собственных целей тестирования, поэтому, если вы все еще сталкиваетесь с проблемами, я бы предположил, что ваш PHP-скрипт, удаляя правильные данные, не возвращает правильную строку - вам следует проверить, что на самом деле выводится на xmlHttp.responseText

Редактировать 2:Ваш PHP-код никогда на самом деле не возвращает «result=true» таким образом, который распознает ваш ответный текст.У вас есть:

if($cmd=="deleterec") {
    mysql_query('DELETE FROM AUCTIONS WHERE ARTICLE_NO = ' . $pk);
}

поэтому вы удалите правильный элемент, но у вас его нет echo 'result=true'; где угодно, поэтому ваша проверка оператора if на ответный текст никогда не будет вызвана.

РЕДАКТИРОВАТЬ 3:Мой текущий тестовый код (который отлично работает в Firefox [не тестировался в других браузерах]).

<script type="text/javascript">
    var xmlHttp;

    function GetXmlHttpObject(){
        var objXMLHttp = null;

        if (window.XMLHttpRequest){
        try{
            objXMLHttp = new XMLHttpRequest();
        }catch (e){
            objXMLHttp = false;
        }
    }else if (window.createRequest){
        try{
            objXMLHttp = new window.createRequest();
        }catch (e){
            objXMLHttp = false;
        }
    }else if (window.ActiveXObject){
        try {
            objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            try {
                objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                objXMLHttp = false;
            }
        }
    }

    return objXMLHttp;
  }
 function deleteItem(layer, url) {
 var xmlHttp=GetXmlHttpObject();
 if(xmlHttp==null) {
    alert("Your browser is not supported?");
 }
 xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            console.log(xmlHttp.responseText);
            if(xmlHttp.responseText == 'result=true') {
                    var row = document.getElementById(layer);
                    row.parentNode.removeChild(row);
            }
            //document.getElementById(layer).innerHTML=xmlHttp.responseText;
    } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            //document.getElementById(layer).innerHTML="loading";
    }
 }
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
 }
 function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
    deleteItem(layer, url);
    }
 }
</script>


<table>
      <tr id="article_260343387801">
      <td><a href="#" onclick="updateByPk()">Name</a></td>
      <td><a href="#" onclick="deleteRec('article_260343387801', '260343387801')">DELETE</a>
      </td>
      </tr>
 </table>

Это отлично работает в сочетании с PHP-кодом (с комментариями для подключения/запроса к базе данных для моего личного тестирования).

Answer 2

Я не сразу понимаю, почему:

row.parentNode.removeChild(row);

не сработает...ты уверен, что действительно доберешься туда?Ваш отчет об ошибках проблематичен:

document.getElementById(layer).innerHTML=xmlHttp.responseText;

«Слой» — это <tr>, и вы не можете назначить внутренний HTML для <tr> в IE.Вместо этого вы получите исключение «Неизвестная ошибка времени выполнения», и скрипт остановится.

(Кроме того, неизвестно, что произойдет, если вы попытаетесь поместить текст непосредственно внутри <tr> без <td> вокруг него.)