删除PHP mysql行时Ajax无法正常工作

Question

echo '<td><a class="delete" href="#" id="'.$row['Id'].'">Delete</a></td>';



<script type="text/javascript">
         $(function() {
         $(".delete").click(function(){
         var element = $(this);
         var del_id = element.attr("id");;
         var info = 'id=' + del_id;
         if(confirm("Are you sure you want to delete this?"))
         {
          $.ajax({
            type: "POST",
            url: "ajax_delete.php",
            data: info,
            success: function(){
          }
         });
           $(this).parents("#checkboxlist").animate({ backgroundColor: "#003" }, "slow")
           .animate({ opacity: "hide" }, "slow");
          }
         return false;
         });
         });

      </script>

ajax_delete.php

<?php
session_start();
include "config.php";

$id=$_REQUEST['id'];

    $record = mysql_query("delete from contact_form where Id = '$id'",$con);
    if($record)
    {

        echo '<META HTTP-EQUIV="Refresh" Content="0; URL=list.php">';
         $_SESSION['deleted']="yes";

    }

    else
    {
        echo mysql_error();
    }


?>

我还添加了jQuery库。 尝试了所有可能的事情。 但是表不会刷新。 数据被删除。 但是仅在刷新页面时才反映出来。 我对此感到沮丧。

Answer 1

您需要从页面上将其删除，然后再将其成功删除。

success: function(){
    element.remove();
}

Answer 2

尝试这个？

<script type="text/javascript">
         $(function() {
         $(".delete").click(function(){
         var element = $(this);
         var del_id = element.attr("id");;

         if(confirm("Are you sure you want to delete this?"))
         {
          $.ajax({
            type: "POST",
            url: "ajax_delete.php",
            data: {id:del_id},
            success: function(){
                element.parents("#checkboxlist").animate({ backgroundColor: "#003" }, "slow")
               .animate({ opacity: "hide" }, "slow");
              }
         });
          }
         });

         });

      </script>

Answer 3

首先将animation code放入success callback

更新的脚本

<script type="text/javascript">
    $(function () {
        $(".delete").click(function () {
            var element = $(this);
            var del_id = element.attr("id");
            ;
            var info = 'id=' + del_id;
            if (confirm("Are you sure you want to delete this?"))
            {
                $.ajax({
                    type: "POST",
                    url: "ajax_delete.php",
                    data: info,
                    success: function () {
                        element.parents("#checkboxlist").animate({backgroundColor: "#003"}, "slow")
                        .animate({opacity: "hide"}, "slow").remove(); //use element and after hide parent remove it 
                    }
                });

            }
            return false;
        });
    });

</script>

Answer 4

您可以使用JS从表格中删除该行（ajax调用不会自动为您完成！）。 像这样做：

$.ajax({
        type: "POST",
        url: "ajax_delete.php",
        data: info,
        success: function(){
          element.closest('tr').remove(); //remove the parent row of the delete button
      }
});

Answer 5

尝试将$(this).parents添加到ajax成功参数

success: function(){
        element.closest("#checkboxlist").animate({ backgroundColor: "#003" }, "slow")
               .animate({ opacity: "hide" }, "slow");         
     }