javascript - Confirmation before deleting (jquery) -
i show simple confirmation dialog box show before running delete function.
here have far
html:
<!-- delete confirmation dialog box --> <div id="confirm" style="display:none;"> <div class="message">are sure want delete?</div> <div class="buttons"> <div class="cancel">no</div><div class="accept">yes</div> </div> </div> <!-- delete button/s --> <a href="javascript:void(0);" onclick="delete("1")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> <a href="javascript:void(0);" onclick="delete("2")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> ...etc...
jquery:
function delete(id) { filename= 'update_db.php'; $('#response').html("<img src='images/ajax-loader.gif' border=0> please wait"); $.post(filename,{postvar:1, id:id, action:'delete'}, function(res) { showstatus(res);}); }
could me modify code show dialog box , confirm delete?? thanks!!!
have links call function show modal. save id in .data(). , wire cancel , accept methods on buttons.
also, should consider less obtrusive javascript. instead of adding onclick attributes links, should use jquery bind click event. (e.g. - $('a').click(function(){//foo});
<div id="confirm" style="display:none;"> <div class="message">are sure want delete?</div> <div class="buttons"> <div class="cancel">no</div><div class="accept">yes</div> </div> </div> <!-- delete button/s --> <a href="javascript:void(0);" onclick="showconfirm('1')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> <a href="javascript:void(0);" onclick="showconfirm('2')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a> <script type="text/javascript"> $(function(){ $('#confirm .accept').click(function(){ delete($("#confirm").data('deleteid')); $("#confirm").hide(); }); $('#confirm .cancel').click(function(){ $("#confirm").data('deleteid','').hide(); }); }); function showconfirm(id) { $('#confirm').data('deleteid', id).show(); } function delete(id) { filename= 'update_db.php'; $('#response').html("<img src='images/ajax-loader.gif' border=0> please wait"); $.post(filename,{postvar:1, id:id, action:'delete'}, function(res) { showstatus(res);}); } </script>
Comments
Post a Comment