ASP.Net Image Button Delete confirmation using jQuery UI Dialog
ASP.Net Image Button Delete confirmation using jQuery UI Dialog
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<div class="Parent">
<div>
test1
</div>
<div>
<input type="button" value="Delete" onclick="Deletemessage(1,this);" />
</div>
</div>
<div class="Parent">
<div>
test2
</div>
<div>
<input type="button" value="Delete" onclick="Deletemessage(1,this);" />
</div>
</div>
<div class="Parent">
<div>
test3
</div>
<div>
<input type="button" value="Delete" onclick="Deletemessage(1,this);" />
</div>
</div>
<div class="Parent">
<div>
test4
</div>
<div>
<input type="button" value="Delete" onclick="Deletemessage(1,this);" />
</div>
</div>
<div class="Parent">
<div>
test5
</div>
<div>
<input type="button" value="Delete" onclick="Deletemessage(1,this);" />
</div>
</div>
<div class="Parent">
<div>
test6
</div>
<div>
<input type="button" value="Delete" onclick="Deletemessage(1,this);" />
</div>
</div>
JavaScript
function Deletemessage(id, obj) {
$('<div></div>').appendTo('body')
.html('<div><h6>Are you want to delete this part?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', modal: true, resizable: false,
buttons: {
Ok: function () {
$(obj).removeAttr('onclick');
// $.ajax({
// url: '/yourPath', type: 'Post', dataType: 'json',
// data: { 'id': id },
// success: function (data) {
$(obj).parents('.Parent').remove();
//Or
//window.location.reload();
// }
// });
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
};