Delete a record with AJAX using confirm box. Let us moving to point I am going to discuss about how delete a record from database without refreshing a page and with use of confirmation box.Now I am explaining how to delete record or data without reload of page with confirmation box using AJAX,PHP and MySQL.
Deleting a record using AJAX is very simple process. As we are going to discuss that we need database from where we delete a record without refreshing a page. Let us see database details for it.
DB Details
DB Name = phpcluster
Tablename = deletedata
Column name = id,name
The files which we will use for record delete are like this
Config.php
Index.php
Delete.php
A jQuery script file is also required for this process.
Table of Contents
Config.php
<?php $conn = mysql_connect('localhost', 'root', '') or die(mysql_error()); mysql_select_db(' phpcluster ', $conn) or die(mysql_error()); ?>
Deletemydata.php
<?php include('config.php'); if($_POST['id']) { $id=mysql_real_escape_string($_POST['id']); $delete = "DELETE FROM `deletedata` WHERE id='$id'"; mysql_query( $delete); } ?>
Index.php
<div class="container"> <?php include('config.php'); $result = mysql_query("SELECT * FROM `deletedata` "); while($row = mysql_fetch_array($result)) { $ids=$row['id']; $name=$row['name']; ?><div class="showdata"> <span class="name"><?php echo $name; ?></span> <span class="action"><a href="#" id="<?php echo $ids; ?>" class="delete" title="Delete" style="color:red;"> X</a></span> </div> <?php } ?> </div>
Above page is index.php and we are putting ajax code in same page(Index.php) but you can use it anywhere else.
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: "deletemydata.php", data: info, success: function(){ } }); $(this).parents(".show").animate({ backgroundColor: "blue" }, "slow") .animate({ opacity: "hide" }, "slow"); } return false; }); }); </script>
Enjoy a process of delete without refresh. Follow these steps will make it easy. Let’s make a fun.