Confirmation before deleting (jquery)

Question

I would like to show a simple confirmation dialog box show before running a delete function.

Here is what I have so far

HTML:

<!-- Delete Confirmation Dialog Box -->

<div id="confirm" style="display:none;">
 <div class="message">Are you sure you want to 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 someone help me to modify my code to show the dialog box and confirm the delete?? Thanks!!!

Answer 1

Have your links call a function to show the modal. Save the id in the .data(). And wire up cancel and accept methods on your buttons.

Also, you should consider less obtrusive javascript. So instead of adding onclick attributes to your links, you should use jquery to bind the click event. (e.g. - $('a').click(function(){//foo});

<div id="confirm" style="display:none;">
 <div class="message">Are you sure you want to 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>