Modifier le bouton de la boîte de dialogue jquery

Question

J'ai un problème lorsque je réutilise la boîte de dialogue pour ne pas avoir à dupliquer le code. Le problème que j'ai est quand je clique sur un bouton "Ajouter un nouveau", j'ai comme bouton "enregistrer" et "annuler". Le bouton Enregistrer dans la boîte de dialogue gère la sauvegarde des informations. Si je clique sur le bouton "Modifier existant" pour modifier mes informations, je voudrais que le bouton "Enregistrer" devienne un bouton "Modifier". Est-ce possible?

Answer 1

Je pense que ce que vous essayez de faire est, au moment de l'exécution, de modifier le texte des boutons en fonction de l'action de l'utilisateur. Ce discussion impliquant Richard Worth peut aider, et c'est ce que j'ai dû utiliser pour accomplir ce que vous essayez de faire.

Fondamentalement, ce que vous essayez de faire n'est pas possible en définissant le tableau array comme un littéral d'objet (inline dans la définition du dialogue). Ce que vous devez faire est de définir votre tableau de boutons en dehors de l'initialisation de la boîte de dialogue; vos index de tableau peuvent être votre texte d'étiquette (comme vous le verrez dans l'exemple de discussion de message). Ensuite, lorsque vous initialisez le tableau, vous affectez simplement la propriété buttons à votre tableau de boutons.

En pseudo-code, vous allez faire ceci:

function createDialog(mode) { //mode=new for dayClick; edit for eventClick 
    var myButtons = {}; //initialize the object to hold my buttons 
    if (mode === "new") { 
    myButtons["Save"] = function() {...} //the function that does the save 
    } else { 
    myButtons["Edit"] = function() {...} //the function that edits 
    } 
    myButtons["Cancel"] = function() {...} //common cancel function for either new or edit mode 

    //other logic 

    $("#dialogAddEdit").dialog({ 
    ... 
    buttons: myButtons, //assign the buttons property to your myButtons array object 
    ... 
    }); 
} 

Hope this helps !!

Answer 2

Il y a une autre solution simple à faire:

il suffit de créer votre boîte de dialogue comme d'habitude, donner les deux (ou plus) les boutons d'un « mot-clé » (ici « open_key » et « cancel_key »), puis, juste après l'initialisation, définissez le texte de ces éléments HTML en utilisant une petite astuce jQuery : contains().

Exemple de code ci-dessous (pp_loca est ma fonction pour obtenir une chaîne localisée, mais pp_loca ne pouvait pas être utilisé dans les « boutons {...} » option ...

$("#dialog_open_from_server").dialog({ 
    resizable: false, 
    height: "auto", 
    width: 600, 
    modal: true, 
    buttons: { 
     "open_key": function() { 
      $(this).dialog("close"); 
     }, 
     "cancel_key": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 
$('.ui-button:contains("open_key")').html(pp_loca('ITF_26')); 
$('.ui-button:contains("cancel_key")').html(pp_loca('ITF_27'));