элемент не удаляется из 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; вызывает ошибку.

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

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

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

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

РЕДАКТИРОВАТЬ 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;

‘layer’ - это

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

(Кроме того, неизвестно, что произойдет, если вы попытаетесь поместить текст непосредственно внутри

без вокруг него.)