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