web-dev-qa-db-fra.com

texte du bouton de la boîte de dialogue de l'interface utilisateur jQuery en tant que variable

Quelqu'un peut-il me dire comment utiliser une variable pour le texte du bouton dans la boîte de dialogue de l'interface utilisateur jQuery?.

jqueryjquery-uivariablesjquery-ui-dialog
56
Nishima

Cela ne fonctionnera pas à cause de la manière dont jQuery gère le nom du bouton (peut être avec ou sans guillemets) 

Cela fonctionnera:

var button_name = 'Test';
var dialog_buttons = {}; 
dialog_buttons[button_name] = function(){ closeInstanceForm(Function); }
dialog_buttons['Cancel'] = function(){ $(this).dialog('close'); }   
$('#instanceDialog').dialog({ buttons: dialog_buttons });
92
W. van Kuipers

Ce que vous pouvez faire est d’attribuer un ID au bouton dans la boîte de dialogue, puis de le manipuler à l’aide de jQuery standard.

$("#dialog_box").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    buttons: [{
        text: "Ok",
        "id": "btnOk",
        click: function () {
            //okCallback();
        },

    }, {
        text: "Cancel",
        click: function () {
            //cancelCallback();
        },
    }],
    close: function () {
        //do something
    }
});

Définir le texte du bouton:

 var newLabel = "Updated Label";
 $("#btnOk").html('<span class="ui-button-text">'+ newLabel +'</span>')
57
crabCRUSHERclamCOLLECTOR

Le problème ici est que le plug-in de dialogue n'attribue pas d'identifiant à ses boutons, il est donc assez difficile de les modifier directement. 

Au lieu de cela, initialisez la boîte de dialogue normalement, localisez le bouton à l'aide du texte qu'il contient et ajoutez un identifiant. Vous pouvez alors accéder directement au bouton pour modifier le texte, le formatage, l’activer/le désactiver, etc.

$("#dialog_box").dialog({
buttons: {
    'ButtonA': function() {
        //... configure the button's function
    }
});
$('.ui-dialog-buttonpane button:contains(ButtonA)').attr("id","dialog_box_send-button");            
$('#dialog_box_send-button').html('Send')
7
David Toy

Peut-être que je manque le point - mais le moyen le plus simple ne serait-il pas d'utiliser le passeur? 

     $("#dialog_box").dialog({
        buttons: {
         [
            text:"OK",
            click: function() {
                //... configure the button's function
            }
         ]
        });

        $("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } });
2
Danny

Cela peut être fait dans les étapes suivantes: 

  1. En JavaScript, vous pouvez créer un tableau de boutons.
  2. Définissez la propriété buttons sur le tableau de boutons.

L'exemple suivant explique les étapes ci-dessus.

  1. Deux boutons sont définis dans btnArray comme suit;
 var btnArray = [
    { text: "Add Entry",
      click: function(){
        this.retVal = true;
        addRowIntoTemplateManifest();
        $(this).dialog('close');
      }
    },
    { text: "Cancel",
      click: function(){
        this.retVal = false;
        $(this).dialog('close');
      }
    }
  ];

Une fonction personnalisée displayConfirmDialog_Dynamic () est écrite, qui accense, en-tête de dialogue, texte de dialogue, bouton Tableau. L'appel à cette fonction est comme suit:

displayConfirmDialog_Dynamic("Add Template Manifest Entry?", "Do you want to add following Cuboid Entry to Template Manifest?\nCuboidNane: '" + json.cuboidName + "' CuboidId: " + json.cuboidId + "\non Server:"
+ json.serverUrl , btnArray );

La fonction displayConfirmDialog_Dynamic est la suivante:

//Confirmation dialog Dynamic Buttons
function displayConfirmDialog_Dynamic(dlgTitle, message, btnArray)
{
    var retVal;
    $("div#dialog-confirm").find("p").html(message);

    var confirmDlg = $( "#dialog-confirm" ).dialog({
          resizable: false,
          height: "auto",
          width: 400,
          modal: true,
          title: dlgTitle,
          buttons: btnArray,
          show:{effect:'scale', duration: 700},
          hide:{effect:'explode', duration: 700}  
    });

    confirmDlg.dialog('option', 'buttons', btnArray);
    confirmDlg.prev(".ui-dialog-titlebar").css({"background":"#ffc000", "color":"#ffffff", "font-size":"13px", "font-weight":"normal"}) ;
    confirmDlg.dialog("open");  
}

Le modèle de dialogue de confirmation est défini comme balise DIV comme suit. Notez que la variable title et le contenu de la balise <p> sont modifiés dynamiquement par le code JavaScript.

<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none;">
  <p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

La capture d'écran de la boîte de dialogue affichée par le code ci-dessus est présentée ci-dessous:

 enter image description here

1
Rahul Varadkar

Et n'oublie pas 

$($("button", $(".info_dialog").parent())[1]).html("<span class='ui-button-text'>Button text here.</span>");
1
Andrew

Cela fonctionnera $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

1
Egor Pavlikhin
var buttonName = "something";
$('#button-id').attr('value', buttonName);
0
Jeff Ober

pourquoi pas un one liner ...

$("span.ui-button-text:contains('OLD BUTTON NAME')").html('NEW BUTTON NAME');
0
Treffor

assigner une classe au bouton. Le texte du bouton sera dans une étendue avec une classe appelée ui-button-text à l'intérieur de votre classe définie . Donc, si vous donnez à votre bouton la classe .contacts-dialog-search-button, le code permettant d'accéder au texte sera:

$('.ui-button-text','.contacts-dialog-search-button').text();

voici le code que j'utilise pour les boutons de mes projets actuels, pour vous donner un exemple.

buttons : [
            {
                text : 'Advanced Search',
                click : function(){
                    if($(this).dialog("option", "width")==290){
                        $('#contacts-dialog-search').show();
                        $(this).dialog("option", "width", 580);
                        $('.ui-button-text','.contacts-dialog-search-button').text('Close Search');
                    }
                    else{
                        $('#contacts-dialog-search').hide();
                        $(this).dialog("option", "width", 290);
                        $('.ui-button-text','.contacts-dialog-search-button').text('Advanced Search');
                    }
                },
                "class" : "contacts-dialog-search-button"
            }
            ]
0
Daithí

Oui tout à fait possible avec le comportement en ligne:

  1. Créez une classe Dialog avec deux méthodes setter, setYesButtonName () et setNoButtonName.
        function ConfirmDialog() {
            var yesButtonName = "Yes";
            var noButtonName = "No";
            this.showMessage = function(message, callback, argument) {
                var $dialog = $('<div></div>')
                    .html(message)
                    .dialog({
                        modal: true,
                        closeOnEscape: true,
                        buttons: [
                            {
                                text:yesButtonName,
                                click: function() {
                                    if (callback && typeof(callback) === "function") {
                                        if (argument == 'undefined') {
                                            callback();
                                        } else {
                                            callback(argument);
                                        }
                                    } else {
                                        $(this).dialog("close");
                                    }
                                }
                            },
                            {
                                text:noButtonName,
                                click: function() {
                                    $(this).dialog("close");
                                }

                            }
                        ]
                    });
                $dialog.dialog("open");
            };

            this.setYesButtonName = function(name) {
                yesButtonName = name;
                return this;
            };

            this.setNoButtonName = function(name) {
                noButtonName = name;
                return this;
            };
        }

  1. Créer un objet de la classe ConfirmDialog.

     this.CONFIRM_DIALOG = new ConfirmDialog();

  2. Appelez la méthode sur n'importe quel événement, disons onclick ()

    OK_DIALOG.setYesButtonName('Wana Marry').showMessage('Worst Idea!!');

Travail accompli!!

0
Ash