表在AJAX调用时不会消失

时间:2016-01-11 03:50:51

标签: javascript php mysql ajax

我正在尝试删除这个表,从AJAX成功删除到PHP调用。

以下是功能,

list.php的

<script type="text/javascript">
    function massDelete()
    {
        if (!confirm("Are you sure"))
        {
            return false;
        }
        else
        {
            var selecedids = $("#selectedids").val();
            {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (xhttp.readyState == 4 && xhttp.status == 200) {
                        document.getElementById("success").innerHTML = xhttp.responseText;
                    }
                };
                xhttp.open("GET", "ajax_delete.php?massDelete=" + selectedids.value, true);
                xhttp.send();
            }
        }
        return false;
    }
</script>

上面的代码成功地为我提供了选择的删除ID

在这个PHP端,在另一个文件

ajax_delete.php

<?php

if (!empty($_REQUEST['massDelete'])) {

    $selectId = $_REQUEST['massDelete'];
    $finalId = ltrim($selectId, ",");

    $sql = mysql_query("delete from contact_form where contactUser_id in ($finalId)", $con);
    if ($sql) {
        // echo '<script>';
        //echo 'var parent = document.getElementById("fullTable")';
        //echo 'element.remove(parent)';
        //echo '</script>';
        echo "sucess deleted";
    } else {
        echo "Please select a Contact to delete";
    }
}
?>

响应确实给了我成功的消息,但在某个地方我想要消除下面的HTML表格作为回应

list.php的

<?php

echo '<table id="fullTable">';
echo "<tr><td> ";
echo '<input type="checkbox" name="checkAll" id="checkAll"/></td>';
echo '<td colspan="8" align="right">';
echo '<button type="submit" onClick="return massDelete()" name="delete" class="deleteall" id="deleted">Delete All</button></td>';
echo "</tr>
<tr>
<th></th>
<th>FIRST NAME</th>
<th>LAST NAME</th>
<th>EMAIL</th>
<th>PHONE</th>
<th>FAX</th>
<th></th>
<th></th>
<th></th>
</tr>";
while ($row = mysql_fetch_array($results)) {
    echo '<div id="checkboxlist">';
    echo '<tr class="show">';
    echo '<td><input name="checkbox[]" type="checkbox" class="checkbox1" value="' . $row['contactUser_id'] . '" id="Checkbox1"></td>';
    echo '<td>' . $row['first_name'] . '</td>';
    echo '<td>' . $row['last_name'] . '</td>';
    echo '<td>' . $row['email'] . '</td>';
    echo '<td>' . $row['phone'] . '</th>';
    echo '<td>' . $row['fax'] . '</td>';
    echo '<td><a href="addedit.php?id=' . $row['contactUser_id'] . '">Edit</a></td>';
    echo '<td><a class="delete" href="#" id="' . $row['contactUser_id'] . '">Delete</a></td>';
    echo '<td><a href="view.php?id=' . $row['contactUser_id'] . '" target="_blank">View</a></td>';
    echo '</div>';
}

} else {
    echo '<td colspan="9"><h1>No contacts found.</td></h1>';
}
?>

我很困惑我应该怎么做,如果删除一行而不是只有那一行消失,

enter image description here

但如果选择删除所有复选框,而不是成功,那么整个表格应该会消失..

enter image description here

3 个答案:

答案 0 :(得分:0)

因此,听起来php成功删除了它,因为刷新页面时会显示正确的数据。

但是如果必须刷新页面以使其正确显示,则需要确保返回正确的信息并正确解析。只需console.log()响应xhttp.responseText,看看是否返回了正确的数据,然后仔细检查您是否正确解析它(正确更改dom)。

答案 1 :(得分:0)

您无需刷新页面即可显示正确的页面。您需要使用javascript删除成功的行。这是基础知识:

var deletedRow = $('#fullTable');
$.post('script.php', {data:data}, function(){
    if(data == "success"){
        deletedRow.remove(); //This will remove the row from the view
    }
});

Ajax可以返回一个调用,你给出一个显示成功的语句,你必须让javascript实际删除它。是的,我们知道它已从数据库中删除,因此您可以从页面中成功删除该视图。

UPDATE 这是使用jQuery,而不是纯粹的javascript。但它只是一个示例,表明您需要使用javascript删除该元素,它不会消失,因为它不再存在于您的数据库中。

答案 2 :(得分:0)

最后提到这个remove any element using Jquery

我找到了解决方案,并且我还更改了下面提到的AJAX功能代码,

function massDelete()          {

'gridview' =>  [
            'class' => '\kartik\grid\Module',
            // enter optional module parameters below - only if you need to
            // use your own export download action or custom translation
            // message source
             'downloadAction' => 'gridview/export/download',
             'i18n' => [
                 'class' => 'yii\i18n\PhpMessageSource',
                 'basePath' => '@kvgrid/messages',
                 'forceTranslation' => true
             ]
        ]

var element = $(this); var selecedids = $("#selectedids").val(); var info = 'massDelete=' + selectedids.value; if(confirm("Are you sure you want to delete this?")) { $.ajax({ type: "POST", url: "ajax_delete.php", data: info, success: function(){ } }); $this.parent("#fullTable").load("list.php"); } return false; } 语句重新加载该表,因此只反映数据库中存在的那些信息。