jquery 漂亮的刪除確認和提交無刷新刪除範例_jquery

本例數據庫結構很簡單，就一個字段就行了
 
jquery.confirm.js

複製代碼 程式碼如下:

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

',
'

',params.title,'

',
'

',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 複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼

複製碼> 程式碼如下:

require "conn.php";

$sql="select * from 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





🎜>

程式碼如下:

$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');

var id=$(this).attr('id'); $.confirm({ 'title ' : '刪除該記錄?', 'message' : '您確認刪除該記錄?
刪除後無法恢復記錄.', '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 複製程式碼複製程式碼複製程式碼 程式碼如下: require "conn.php"; $id=$_GET['id']; $delete_small_sql = "delete from add_delete_record where id='$ id'"; $result_small = mysql_query($delete_small_sql); ?>