jquery beautiful deletion confirmation and submission without refresh deletion example_jquery

The database structure in this example is very simple, just one field

jquery.confirm.js

Copy code The code is as follows:

(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML = '' name ' span>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'

',
'

',
'

',params.title,' h1>',
'

',params.message,'

',
'

',
buttonHTML,
'

'
].join('');
$(markup).hide().appendTo('body').fadeIn() ;
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i ).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide( );
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut( function(){
$(this).remove();
});
}
})(jQuery);

PHP Code

Copy code The code is as follows:

php
require "conn.php";
$sql="select * from `add_delete_record` where id>0";
$rs=mysql_query($sql);
if ($row = mysql_fetch_array($rs))
{
do {
?>

}
while ($row = mysql_fetch_array($rs));
}?> ;

JavaScript Code

Copy code The code is as follows:

$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest ('.item');
var id=$(this).attr('id');
$.confirm({
'title' : 'Delete this record?',
'message' : 'Are you sure you want to delete this record?
The record cannot be restored after deletion.',
'buttons' : {
'Yes' : {
'class' : 'blue ',
'action': function(){$.ajax({
type: 'GET',
url: 'del.php',
data: 'id=' id,
});
elem.slideUp();
}
},
'No' : {
'class' : 'gray',
'action': function (){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
});

del.php

Copy code The code is as follows:

require "conn.php";
$id=$_GET['id'];
$delete_small_sql = "delete from add_delete_record where id='$id'";
$result_small = mysql_query($delete_small_sql);
?>