Ajax delete with PHP and MySql | 2my4edge

13 August 2013

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.
ajax delete with confirmation box

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:










17 comments:

  1. .animate which isn not worked for mozilla firefox give me suggestions for that

    ReplyDelete
  2. hghjgjhgjhfsdfg

    ReplyDelete
  3. If checkbox "dont not show again" cheked, delete not work again?
    Thank's

    ReplyDelete
  4. Super post make it same way to add and edit. i'm early waiting.

    ReplyDelete
  5. Thanks Working for me. $(this).parents(".show") here we can put our id or class i put $(this).parents("tr") for my table content.

    ReplyDelete
  6. not working

    ReplyDelete
  7. ajax code not working ..

    ReplyDelete
  8. your code too good .. thanks

    ReplyDelete
  9. not working

    ReplyDelete
  10. it's vary used full code.. thnx ...!

    ReplyDelete
  11. thank you...its workig for me

    ReplyDelete
  12. is the ajax saved as another file? or is it inserted in the index.php file?

    ReplyDelete

^