Jquery nice delete confirmation and submit no refresh delete example

  • 2020-03-29 23:44:52
  • OfStack

This example database structure is very simple, just a field line
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311131632307.jpg? 20131013163336 ">  
Jquery. Confirm. Js
 
(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 += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>'; 
if(!obj.action){ 
obj.action = function(){}; 
} 
}); 
var markup = [ 
'<div id="confirmOverlay">', 
'<div id="confirmBox">', 
'<h1>',params.title,'</h1>', 
'<p>',params.message,'</p>', 
'<div id="confirmButtons">', 
buttonHTML, 
'</div></div></div>' 
].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); 

The PHP Code
 
<div id="page"> 
<?php 
require "conn.php"; 
$sql="select * from `add_delete_record` where id>0"; 
$rs=mysql_query($sql); 
if ($row = mysql_fetch_array($rs)) 
{ 
do { 
?> 
<div class="item"> 
<a href="#" > 
<?php echo $row['text']?> 
</a> 
<div class="delete" id="<?php echo $row['id']?>"></div> 
</div> 
<?php 
} 
while ($row = mysql_fetch_array($rs)); 
}?> 
</div> 

JavaScript Code
 
$(document).ready(function(){ 
$('.item .delete').click(function(){ 
var elem = $(this).closest('.item'); 
var id=$(this).attr('id'); 
$.confirm({ 
'title' : ' Delete the record ?', 
'message' : ' You confirm the deletion of the record ? <br /> The record could not be recovered 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
 
<?php 
require "conn.php"; 
$id=$_GET['id']; 
$delete_small_sql = "delete from add_delete_record where id='$id'"; 
$result_small = mysql_query($delete_small_sql); 
?> 

Related articles: