Éviter plusieurs (40) boîtes de dialogue de confirmation jquery - réutilisation?

Question

Je suis en train de réparer une ancienne application web avec jQuery.

J'ai un formulaire qui a 40 boutons qui ont chacun un type de confirmation qui utilisent javascript confirm. Je veux les changer pour utiliser la boîte de dialogue modale jquery.

J'ai programmé plusieurs d'entre eux comme ci-dessous et ils fonctionnent bien. Le problème est qu'il y en a 40 sur le formulaire - donc vous ne voulez pas avoir à programmer 40 boîtes modales séparées. La seule chose qui change vraiment est le javascript qui est appelé quand on clique sur le bouton

Des suggestions?

code appelé sur le bouton:

$("#confirm1dialogTitle").html("Approve?"); 
$("#confirm1dialogText").html("Do you want to approve this request?"); 
$('#confirm1dialog').dialog('open'); 

javascript intégré:

<script type="text/javascript"> 
$(function() { 
    $("#confirm1dialog").dialog({ 
     bgiframe: true, 
     autoOpen: false, 
     width: 350, 
     height: 350, 
     modal: true, 
     buttons: { 
      'Yes': function() { 
       window.document.forms[0].FDDStatus.value = "Approved"; 
       window.document.forms[0].DivisionApproval.value = "Yes"; 
       window.document.forms[0].setApprovalFields(); 
      }, 
      'No': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
}); 
</script> 

HTML intégré:

<div id="confirm1dialog" title="<span id='Title'>Title</span>"> 
    <div id="users-contain" class="ui-widget"> 
     <form> 
     <span id="confirm1Text"></span> 
     </form> 
    </div> 
</div> 

Answer 1

vous pouvez mettre le javascript qui est en train de changer dans un objet de fonction, puis le réutiliser ..

laisse supposer que vous vous de ressemble à ceci:

<form><input id='btn1' /><input id='btn2' /></form> 

vous faire une fonction d'assistance:

var confirmHelper = function(id, yesCallback) { 
    $(id).click(function() { 
    $(function() { 
     // the code from you example 
     $("#confirm1dialog").dialog({ 
     bgiframe: true, 
     autoOpen: false, 
     width: 350, 
     height: 350, 
     modal: true, 
     buttons: { 'Yes': yesCallback, 'No': function() { } } 
     } 
    } 
    } 
} 

puis vous l'appliquez à vos boutons:

confirmHelper('btn1' function() { 
    // your callback from before 
    window.document.forms[0].FDDStatus.value = "Approved"; 
    window.document.forms[0].DivisionApproval.value="Yes";         
    window.document.forms[0].setApprovalFields(); 
}); 

confirmHelper('btn2' function() { 
    // your other javascript code 
}); 

comme pour les 40 boutons :)

Answer 2

Vous pouvez écrire 40 fonctions en javascript (ceux qui doivent être exécuté lorsque le bouton oui est enfoncé) et utilisez une seule boîte modale. Je ne sais pas à quoi ressemble votre fonction click(), mais il est facile d'y ajouter une variable en utilisant par exemple un attribut rel sur le lien que vous cliquez, une classe, etc. En fonction de la variable , vous pouvez exécuter la fonction requise.