Ajax call not delete div

Question

У меня есть страница php, где раздел имеет таблицу. Я предоставил кнопку удаления, чтобы запись удалялась после нажатия на нее. Я делаю вызов Ajax для удаления данных из БД, а затем из пользовательского интерфейса.

Вот часть моей страницы 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-вызов и удалить данные из БД, но он не удаляется из пользовательского интерфейса, пока я не обновляю страницу.

Пожалуйста, помогите, поскольку я застрял с этим в течение очень долгого времени.

Спасибо заранее!

Answer 1

Заменить

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

По

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

Пояснение:

this.commentId не имеет никакого смысла.

Возможно, вы ссылаетесь на него по запросу AJAX.

Но у нас есть это как аргумент функции, поэтому, вместо того, чтобы сделать его сложным, просто используйте id.

Answer 2

Проблема в том, что ваш 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 3

попробовать это:

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

или:

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