Question

我有一个php页面，其中section有一个表。我提供了一个删除按钮，以便在单击后删除该条目。我进行Ajax调用以从数据库中删除数据，然后从UI中删除。

以下是我的php页面的一部分：

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Your Promotion History</h3>
    </div><!-- /.box-header -->
    <div id="promoteajax" class="product_class_entry">
        <div class="box-body">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                        <th>Col 4</th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>

                <?php 
                    $query1 = mysqli_query($con,"...some query here...");
                    while($row=mysqli_fetch_array($query1))
                    {
                        ...some data fetched from DB here... ?>
                        <div id="product_entry_<?php echo $id?>" class="product_class_entry_<?php echo $id?>">
                            <tr>
                                <td><font size=2px><?php echo $date?></font></td>
                                <td><font size=2px><?php echo $ProductName?></font></td>
                                <td><font size=2px><?php echo $Category.' / '.$SubCategory?></font></td>
                                <td><font size=2px><?php echo $MRP.' / '.$Price?></font></td>
                                <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DirectPromoteSubmit(<?php echo $id?>)">Promote</button></td>
                                <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="RePromoteSubmit(<?php echo $id?>)">Edit</button></td>
                                <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DelPromoteSubmit(<?php echo $id?>)">X</button></td>
                            </tr>
                        </div>
                    <?php }
                ?>
            </tbody>
            <tfoot>
                <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </tfoot>
        </table>
    </div><!-- /.box-body -->
</div>

这是我的AJAX代码：

<?php
    include("../dbconnection.php");
    include("session.php");

    $error = '';
    $success = '';
    $response = array();
    $promote_id=$_POST['id'];
    $id = isset($_REQUEST['id'])?trim($_REQUEST['id']):'';

    if($id){
        $query = "delete from sellerpromotions where id = '$promote_id'";
        if (!mysqli_query($con,$query))
        {
            die('Error: ' . mysqli_error($con));
        }
        else
        {
            $msg ="<br> 1 record added";
        }
        $success = 'Comment has been deleted successfully.';
    }
    else
        $error = 'Promotions doesn\'t deleted successfully. Please try again later.';       

    $response = array('error' => $error, 'success' => $success, 'id' => $promote_id);
    echo json_encode($response);
    exit(); 
?>

这是我的JS：

function DelPromoteSubmit(id){
    var self = $(this); 
    alert("in delete promote: " + self);
    var dataString = "id=" + id;
    alert(dataString);
    $.ajax({
        url: "SellerPanel/delete_data2.php", 
        type: 'post', 
        dataType: 'json',
        commentId: id, 
        data: dataString,
        success: function(json){                                        
            if (json.error) {
                alert(json.error);
                return false;
            }                       

            $(".product_class_entry_" + this.commentId).remove();
            alert(json.success);
        } // end success function   
    });  
    return false;           
};

我的问题是我能够进行ajax调用并从数据库中删除数据但是它不会从UI中删除，直到我刷新页面。

请帮忙，因为我很长时间都坚持这个。

提前致谢!!

Answer 1

问题是因为您的HTML无效 - 您不能将div作为tbody的直接子项。 div出现在表外，所以当你删除它时，它没有效果。

如果您更改HTML以便将id和class放在tr元素上，那么它应该可以正常工作：

<?php 
    $query1 = mysqli_query($con,"...some query here...");
    while ($row = mysqli_fetch_array($query1))
    {
        // ...some data fetched from DB here... ?>
        <tr id="product_entry_<?php echo $id?>" class="product_class_entry_<?php echo $id?>">
            <td><font size=2px><?php echo $date?></font></td>
            <td><font size=2px><?php echo $ProductName?></font></td>
            <td><font size=2px><?php echo $Category.' / '.$SubCategory?></font></td>
            <td><font size=2px><?php echo $MRP.' / '.$Price?></font></td>
            <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DirectPromoteSubmit(<?php echo $id?>)">Promote</button></td>
            <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="RePromoteSubmit(<?php echo $id?>)">Edit</button></td>
            <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DelPromoteSubmit(<?php echo $id?>)">X</button></td>
        </tr>
    <?php } 
?>

Answer 2

替换

$(".product_class_entry_"+this.commentId).remove();

通过

$(".product_class_entry_"+id).remove();

说明：

this.commentId没有任何意义。

您可能会从AJAX请求中引用它。

但是，我们将它作为函数参数，因此，只需使用id而不是使其复杂化。

Answer 3

试试这个：

$("#product_class_entry_"+json.id).remove(); //id from ajax

或：

 $("#product_class_entry_"+id).remove(); //id from the function

Ajax调用不删除div

3 个答案: