Following example shows the confirmation dialog box with a yes/no buttons using Jquery.
We have a employee table with radio buttons. A user can select a radio button and click on the delete button to delete the employee record.
I have created a simple Confirm dialog with not much styling, but we can always customize the html to make it look better.
Example :
A working example can be seen in JSFiddle at : http://jsfiddle.net/sanjayingole/9Lyfy9ay/1/
Javascript :
// openDeleteConfirmDialog opens the confirmation dialog box
function openDeleteConfirmDialog() {
$("#selectedEmployee").html($("td[id='"+ $("input[name='empid']:checked").val() +"']").html());
// Define the Dialog and its properties.
$("#confirmDeleteDialog").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 150,
width: 500,
buttons: {
"Yes": function () {
$(this).dialog('close');
performAction(true);
},
"No": function () {
$(this).dialog('close');
performAction(false);
}
}
});
}
// Call the openDeleteConfirmDialog method on Buttons click
$('#btnDeleteEmployee').click(openDeleteConfirmDialog);
// delete record if user clicked Yes on confirmation dialog
function performAction(action) {
if (action) {
$("input[name='empid']:checked").parent().parent().hide();
$("#confirmMessage").html("Successfully Deleted Employee : " + $("td[id='"+ $("input[name='empid']:checked").val() +"']").html());
} else {
// Do nothing
}
}
HTML Code:
<H1>Employee Records </H1>
<div id="confirmMessage">
</div>
<table>
<tr>
<th></th>
<th>Employee Name</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid1"></input></td>
<td id="empid1">John Oliver</td>
<td>123 Abbey Road, Chicago</td>
<td>123-232-1233</td>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid2"></input></td>
<td id="empid2">Madonna</td>
<td>2017 Lomard St, San Francisco</td>
<td>874-522-3511</td>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid3"></input></td>
<td id="empid3">Adam Sandler</td>
<td>787 Beverly Hills, LA</td>
<td>434-215-5590</td>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid4"></input></td>
<td id="empid4">Jack Nicholson</td>
<td>6789 Hollywood Blv, LA</td>
<td>898-431-6574</td>
</tr>
<table>
<input type="button" id="btnOpenDialog" value="Delete Employee Record"/>
<div id="confirmDeleteDialog" class="confirmDeleteDialog"
style="border: 1px solid #000000; display: none;">
<div class="sectionHeader" style="top: 0px;">
<span class="sectionTitle">Delete Employee Record</span>
<span id="selectedEmployee"></span>
</div>
</div>
CSS Code :
table {
background : #DfDfFF;
border : 1px dotted;
margin-left 30px;
margin-bottom : 30px;
}
th {
border : 1px solid;
}
td {
border : 1px solid;
}
#btnDeleteEmployee {
margin-left : 270px;
}
#confirmMessage {
background-color : rgb(183, 240, 121);
width : 455px;
}
.confirmDeleteDialog {
width : 700px;
height : 100px;
padding : 20px;
background-color : #d6d8d9;
background: #d6d8d9;
}
.ui-dialog-titlebar {display:none;}
.ui-widget-overlay {
background: black;
opacity: .8;
filter: Alpha(Opacity=30);
}
We have a employee table with radio buttons. A user can select a radio button and click on the delete button to delete the employee record.
I have created a simple Confirm dialog with not much styling, but we can always customize the html to make it look better.
Example :
A working example can be seen in JSFiddle at : http://jsfiddle.net/sanjayingole/9Lyfy9ay/1/
Javascript :
// openDeleteConfirmDialog opens the confirmation dialog box
function openDeleteConfirmDialog() {
$("#selectedEmployee").html($("td[id='"+ $("input[name='empid']:checked").val() +"']").html());
// Define the Dialog and its properties.
$("#confirmDeleteDialog").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 150,
width: 500,
buttons: {
"Yes": function () {
$(this).dialog('close');
performAction(true);
},
"No": function () {
$(this).dialog('close');
performAction(false);
}
}
});
}
// Call the openDeleteConfirmDialog method on Buttons click
$('#btnDeleteEmployee').click(openDeleteConfirmDialog);
// delete record if user clicked Yes on confirmation dialog
function performAction(action) {
if (action) {
$("input[name='empid']:checked").parent().parent().hide();
$("#confirmMessage").html("Successfully Deleted Employee : " + $("td[id='"+ $("input[name='empid']:checked").val() +"']").html());
} else {
// Do nothing
}
}
HTML Code:
<H1>Employee Records </H1>
<div id="confirmMessage">
</div>
<table>
<tr>
<th></th>
<th>Employee Name</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid1"></input></td>
<td id="empid1">John Oliver</td>
<td>123 Abbey Road, Chicago</td>
<td>123-232-1233</td>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid2"></input></td>
<td id="empid2">Madonna</td>
<td>2017 Lomard St, San Francisco</td>
<td>874-522-3511</td>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid3"></input></td>
<td id="empid3">Adam Sandler</td>
<td>787 Beverly Hills, LA</td>
<td>434-215-5590</td>
</tr>
<tr>
<td><input type="radio" name ="empid" id="empid" value="empid4"></input></td>
<td id="empid4">Jack Nicholson</td>
<td>6789 Hollywood Blv, LA</td>
<td>898-431-6574</td>
</tr>
<table>
<input type="button" id="btnOpenDialog" value="Delete Employee Record"/>
<div id="confirmDeleteDialog" class="confirmDeleteDialog"
style="border: 1px solid #000000; display: none;">
<div class="sectionHeader" style="top: 0px;">
<span class="sectionTitle">Delete Employee Record</span>
<span id="selectedEmployee"></span>
</div>
</div>
CSS Code :
table {
background : #DfDfFF;
border : 1px dotted;
margin-left 30px;
margin-bottom : 30px;
}
th {
border : 1px solid;
}
td {
border : 1px solid;
}
#btnDeleteEmployee {
margin-left : 270px;
}
#confirmMessage {
background-color : rgb(183, 240, 121);
width : 455px;
}
.confirmDeleteDialog {
width : 700px;
height : 100px;
padding : 20px;
background-color : #d6d8d9;
background: #d6d8d9;
}
.ui-dialog-titlebar {display:none;}
.ui-widget-overlay {
background: black;
opacity: .8;
filter: Alpha(Opacity=30);
}
