Thursday, 17 July 2014

Ajax delete with PHP and MySql

Ajax delete with confirm box, here we are going to see about how to delete the information without refreshing page and with confirmation box, and this is the thing that the greater part of them seeking, so today going to demonstrate to you that, proper methodologies to make this alarm style box delete with Ajax and php, mysql.
As we talked about in more exercises before to this, it is extremely straightforward by utilizing AJAX, in an ordinary delete the page getting revived, so for here are going to do that without refreshing the page. So we need to make database for that. Let see the insights 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 include it yet 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>


No comments:

Post a Comment