Jquery nice deletion confirmation and submission without refreshing deletion example _ jquery-js tutorial

Jquery's beautiful deletion confirmation and submission of refreshing deletion are simple in the database structure in this example. The specific implementation code is as follows, if you are interested, you can refer to the database in this example. The structure is very simple, just a field.

Jquery. confirm. js

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 + '';
If (! Obj. action ){
Obj. action = function (){};
}
});
Var markup = [
'

',
'

',
'', Params. title ,'',
'

', Params. message ,'

',
'

',
ButtonHTML,
'

'
]. Join ('');
$ (Markup). hide (). appendTo ('body'). fadeIn ();
Var buttons = $ ('# confirmBox. click '),
I = 0;
$. Each (params. buttons, function (name, obj ){
Buttons. eq (I ++). click (function (){
// Calling the action attribute when
// Click occurs, and hiding the confirm.
Obj. action ();
$. Confirm. hide ();
Return false;
});
});
}
$. Confirm. hide = function (){
$ ('# ConfirmOverlay'). fadeOut (function (){
$ (This). remove ();
});
}
}) (JQuery );

PHP Code

The Code is as follows:

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

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?
Records 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

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 );
?>