Ajax delete with PHP and MySql

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.

DOWNLOAD            LIVE DEMO

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>

RELATED POSTS:

• Facebook style 'see more' text onclick using php, mysql, Ajax and Javascript

Insert and view data without refresh using PHP, MySql and AJAX

Autocomplete search using php, mysql and ajax

Simple Pagination with loading effect using Qjuery, PHP and MySql

Username live availability Check using php and Ajax

Marquee style in different manner with PHP and MySql

Comment System using PHP and MySql

Create Database with MySql and INSERT coding in php

Alert style validation using Javascript