DOMから削除されていない要素

StackOverflow https://stackoverflow.com/questions/606152

  •  03-07-2019
  •  | 
  •  

質問

php経由でテーブルに表示されたmysqlからレコードを削除し、その後ページからテーブルの行を削除するコードがあります。レコードは削除されますが、ページまたはDOMで変更はなく、即座に変更されるはずです。

DOMから削除するJavaScriptコードは次のとおりです

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>

ただし、ページは更新されません。

なぜ？

役に立ちましたか？

解決

私はあなたのコードをテストページに投げただけで、次のものを削除しても機能します。

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

行の直前の行：

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

document.getElementById(layer).innerHTML=xmlHttp.responseText;がエラーの原因です。

編集： get_records.phpの「バージョン」は単なるPHPページであり、テストの目的で「result = true」をエコーするだけなので、まだ問題が発生する場合は、PHPスクリプトを使用することをお勧めします。正しいデータを削除しているときに正しい文字列が返されない-実際にxmlHttp.responseText

に出力されるものを確認する必要があります

編集2： responseTextが認識する方法で、PHPコードが実際に 'result = true'を返すことはありません。次のものがあります：

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

正しいアイテムを削除しますが、echo 'result=true';がないため、responseTextをチェックする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コードと組み合わせて正常に機能します（個人的なテストのためにデータベース接続/クエリをコメントアウトします）。

他のヒント

すぐには理由がわかりません：

row.parentNode.removeChild(row);

機能しません...実際にそこに着いていますか？エラー報告に問題があります：

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

<！>＃8216; layer <！>＃8217; <！> lt; tr <！> gt;であり、<！> lt; tr <！> gt;にinnerHTMLを割り当てることはできません。 IEで。代わりに、<！>＃8216; Unknown runtime error <！>＃8217;が表示されます。例外およびスクリプトは停止します。

（さらに、周囲に<！> lt; td <！> gt;なしで<！> lt; tr <！> gt;内にテキストを直接配置しようとした場合の動作は未定義です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top