web-dev-qa-db-fra.com

Modification dynamique de la boîte de dialogue Interface utilisateur jQuery Texte du bouton

J'utilise la boîte de dialogue jQuery UI pour l'envoi de formulaire ajax. Je souhaite changer le texte de mon bouton de sauvegarde Pour attendre, lorsque l'utilisateur clique dessus, puis de nouveau sur Enregistrer lorsque l'appel ajax est terminé. pls aidez-moi

jqueryajaxjquery-ui
21
saokat

En supposant que vous utilisiez l'option .dialog () avec les boutons, vous pouvez affecter une classe personnalisée au bouton d'envoi, puis cibler le texte du bouton intérieur via la classe affectée à l'étendue (texte du bouton ui):

    $("#dialog-test").dialog({
        title: "My dialog",
        buttons:
            [
              {
                  text: "Submit",
                  click: function() {
                    $(".my-custom-button-class > .ui-button-text").text("Please Wait..."); 
                    $("#some-form").submit();
                  },
                  'class': 'my-custom-button-class'
              }
            ]
    });

Lorsque votre sauvegarde est terminée via submit (), vous pouvez utiliser le même appel pour redéfinir le texte à votre choix.

22
Justin R.

Bien que la question soit très ancienne, je trouve la réponse très simple et elle n’a pas été donnée ici. 

  • Vous pouvez définir un identifiant pour le bouton et l'utiliser. 
  • Tous les boutons de la boîte de dialogue sont des boutons jQuery UI. Vous pouvez donc utiliser la fonction $().button() pour modifier le bouton. 

Le code JavaScript est: 

$('#dialog').dialog({
    buttons:[{
        id: 'buttonId',
        click: function() {
            // your function
        }]
});
$('#buttonId').button('option', 'label', 'Please wait...');
22
ManojRK

Si cela peut aider quelqu'un: implémentation complète avec exemple (PS: j'ai emprunté getDialogButton () à un autre message sur ce site mais je ne me souviens plus du lien).

//-> Change to Loading Notice:
setButton('.settingsDialog', 'Save', 'Saving...', false);
setTimeout(function() { setButton('.settingsDialog', 'Saving...', 'Save', true); }, 800 );},

//Select the Dialog Buttons
function getDialogButton( dialog_selector, button_name ) {
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i ) {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }
  return null;
}


//Button Controller for AJAX Loading:
function setButton(sDialogClass, sButtonName, sNewButtonName, bEnabled){
    var btn = getDialogButton(sDialogClass, sButtonName);
    btn.find('.ui-button-text').html(sNewButtonName);

    if (bEnabled) {
        btn.removeAttr('disabled', 'true');
        btn.removeClass( 'ui-state-disabled' );
    } else {
        btn.attr('disabled', 'true');
        btn.addClass( 'ui-state-disabled' );
    }
}
7
JaredBroad
$(".ui-dialog-buttonpane button:contains('Save') span").text("Please wait...");
4
CleanBold

Notez la bonne manière pour créer plusieurs boutons à la volée:

'buttons', [
    {
        text: "Download",
        click: function () {...}
    },
    {
        text: "Not now",
        click: function () {...}
    }
]

Voici un exemple utilisant le style non-array: Voir this jsFiddle pour un exemple.

2
gibberish

Pour ma version de jquery ui (1.11.4), ce format a permis de modifier le texte du bouton:

$('#setActionButton').button('option').text('new text');

Cependant, il n'a pas réinitialisé le bouton avec le nouveau texte dans la boîte de dialogue! C'était frustrant. La réponse de JaredBroad ci-dessus est celle qui a fonctionné pour moi. Commencez par extraire tous les boutons de la boîte de dialogue, puis effectuez une boucle pour trouver le bouton permettant de renommer. Ensuite, il a changé le texte à chaque fois.

1
excyberlabber

Utilisez $().text('Please Wait') avant d'effectuer l'appel AJAX, puis ajoutez $().text('Save') comme dernière opération du rappel réussi.

Notez que pour cela, vous devez utiliser un élément button et non un élément input:

<button>Text here</button>
1
Aaron Digulla

Pour ceux qui ne veulent pas ajouter d'identifiant/classe supplémentaire ou qui ne veulent pas répéter la fonction de rappel au clic:

// initialization
$('#my-dialog').dialog({
    buttons: [
        {
            text: 'Submit',
            click: function () {...}
        }
    ]
});
// You can simply change button text by this way
$('#my-dialog').dialog('option', 'buttons.0.text', 'wait...');
1
Yan
$("#dialog-test").dialog({
    title: "My dialog",
    buttons:
        [
          {
              text: "Submit",
              click: function() {
                $(".my-custom-button-class > .ui-button-text").text("Please Wait...");
                //You may use $(this) as selector or allso $("#dialog-test")
                $(this).parent().children('.ui-dialog-buttonpane').children().children().html('Please wait..');
                //As you have only one button, it should not matter to specify child element, but you can like this:
                //$($(this).parent().children('.ui-dialog-buttonpane').children().children()[0]).html('Please wait..');

                $("#some-form").submit();
              },
              'class': 'my-custom-button-class'
          }
        ]
});
1
Aivar Luist

Vous devrez utiliser les options beforeSend et complete en conséquence. Consultez la documentation pour plus d'informations:

http://api.jquery.com/jQuery.ajax/

0
Sarfraz

Je constate que si j'utilise beaucoup de boîtes de dialogue avec les mêmes boutons, je peux définir classe pour chaque bouton de chaque boîte de dialogue, puis modifier le texte de tous les boutons.

$('#dialog1').dialog({
        buttons:[{
                    class: "btnOK",
                    click: function () {
                        ...
                    }
                },
                {
                    class: "btnClose",
                    click: function () {
                        ...
                    }
                }]
    });

$('#dialog2').dialog({
        buttons:[...]
    });    

$('.btnOK').button('option', 'label', 'Your text here');
$('.btnClose').button('option', 'label', 'Your text here');

De plus, au lieu de classe, vous pouvez définir id pour chaque bouton (cependant, id devrait être unique).

0
Kirill Ch