CODEWITHSUNDEEP
phpjquerymysqlajax
Jijo Nair
Jijo Nair

Reputation: 838

Ajax Not Working while deleting the PHP mysql row

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();
    }


?>

I have also added the jquery libraries. Tried every possible thing. But the table does not refreshes. The data is deleted. But reflected only when I refresh the page. I am frustrated with this.

Upvotes: 0

Views: 551

Answers (5)

Ikhlak S.
Ikhlak S.

Reputation: 9034

Try adding $(this).parents to the ajax success param

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

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50787

You need to delete it from the page, then, after it's successfully deleted.

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

Upvotes: 4

Karan
Karan

Reputation: 2112

First put your animation code in success callback

Updated script

<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>

Upvotes: 0

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

Reputation: 4216

You can remove the row from the table with JS (the ajax call will not do it automatically for you!). Do it like this: 

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

Upvotes: 0

Pankaj Kumar
Pankaj Kumar

Reputation: 101

Try this?

<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>

Upvotes: 0

Related Questions