Ajax delete with PHP and MySql ::: HEMANT VISHWAKARMA

Ajax delete with confirm box, here we are going to see about how to delete the data without refreshing page and with confirmation box, and this is what most of them searching, so today going to show you that, how to make this alert style box delete with ajax and php, mysql.

As we discussed in more tutorials before to this, it is very simple by using AJAX, in a usual delete tha page getting refreshed, so for here are going to do that with out refreshing the page. so we have to make database for that. let see the details about that.

DATABASE DETAILS

database name --> 2my4edge

table name --> delete

column names --> id, content

FILES

1. db.php
2. delete.php
3. index.php

the above files and JQuery min file in important too.  

DB.PHP

<?php
$conn = mysql_connect('localhost', 'root', '') or die(mysql_error());
mysql_select_db('2my4edge', $conn) or die(mysql_error());
?>

DELETE.PHP

<?php
include('db.php');
if($_POST['id'])
{
$id=mysql_real_escape_string($_POST['id']);
$delete = "DELETE FROM `delete` WHERE id='$id'";
mysql_query( $delete);
}
?>

INDEX.PHP

<div class="container">
<?php
include('db.php');
$result = mysql_query("SELECT * FROM `delete` ORDER BY id ASC");
while($row = mysql_fetch_array($result))
{
$id1=$row['id'];
$name=$row['content'];
?>
<div class="show">
<span class="name"><?php echo $name;  ?></span>
<span class="action"><a href="#" id="<?php echo $id1; ?>" class="delete" title="Delete">X</a></span>
</div>
<?php
}
?> 
</div>

the above coding are comes in index.php page and we have and ajax script in the same page or you can add it but here i put coding on the same page

AJAX SCRIPT

<script src="jquery.js"></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: "delete.php",
   data: info,
   success: function(){
 }
});
  $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
  .animate({ opacity: "hide" }, "slow");
 }
return false;
});
});
</script>