Ajax Not Working while deleting the PHP mysql row

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


?>

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.

Ravi Hirani · Accepted Answer · 2015-12-29 07:01:17Z

4

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

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

edited Dec 29, 2015 at 7:01

Ravi Hirani

6,5341 gold badge31 silver badges43 bronze badges

answered Dec 29, 2015 at 6:19

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Over a year ago

Where do you find delete() function for element? I can't find in jQuery or JS!

Pankaj Kumar · Accepted Answer · 2015-12-29 06:27:14Z

0

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>

edited Dec 29, 2015 at 6:27

answered Dec 29, 2015 at 6:20

Pankaj Kumar

1012 silver badges11 bronze badges

Comments

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ · Accepted Answer · 2015-12-29 06:30:26Z

0

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

answered Dec 29, 2015 at 6:30

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

4,2261 gold badge27 silver badges55 bronze badges

Comments

Karan · Accepted Answer · 2015-12-29 06:33:55Z

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>

Ikhlak S. · Accepted Answer · 2015-12-29 07:08:25Z

0

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

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

answered Dec 29, 2015 at 7:08

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

Collectives™ on Stack Overflow

Ajax Not Working while deleting the PHP mysql row

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related