Confirmation avant la suppression (jquery)

Question

Je souhaite afficher une boîte de dialogue de confirmation simple avant d'exécuter une fonction de suppression.

Voici ce que j'ai jusqu'à présent

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

} 

Quelqu'un pourrait-il me aider à modifier mon code pour afficher la boîte de dialogue et confirmer la suppression ?? Merci!!!

Answer 1

Vos liens appellent une fonction pour montrer le modal. Enregistrez l'ID dans le fichier .data(). Et câbler annuler et accepter les méthodes sur vos boutons.

En outre, vous devriez considérer moins javascript envahissant. Ainsi, au lieu d'ajouter des attributs onclick à vos liens, vous devez utiliser jquery pour lier l'événement click. (Par exemple - $('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>