Текст диалогового окна jQuery UI в виде переменной

Ответ 1

Это не будет работать из-за того, как jQuery обрабатывает имя кнопки (может быть с кавычками или без них)

Это будет работать:

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

Ответ 2

Что вы можете сделать, это назначить кнопке в диалоговом окне идентификатор, а затем управлять им с помощью стандартного jQuery.

$("#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
    }
});

Установить текст кнопки:

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

Ответ 3

Проблема заключается в том, что плагин диалога не назначает идентификатор своим кнопкам, поэтому их довольно сложно изменить напрямую.

Вместо этого инициализируйте диалог как обычно, найдите кнопку в тексте, который он содержит, и добавьте идентификатор. Затем к кнопке можно получить доступ, чтобы изменить текст, форматировать, включить/отключить его и т.д.

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

Ответ 4

Возможно, мне не хватает смысла - но не самый простой способ использовать setter?

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

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

Ответ 5

Это будет работать $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

Ответ 6

И не забывайте

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

Ответ 7

var buttonName = "something";
$('#button-id').attr('value', buttonName);

Ответ 8

назначить класс кнопке. Текст кнопки будет в диапазоне с классом ui-button-text внутри вашего определенного класса. Поэтому, если вы дадите свою кнопку классу .contacts-dialog-search-button, тогда код для доступа к тексту будет:

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

вот код, который я использую для своих кнопок текущих проектов, чтобы дать вам пример.

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"
            }
            ]

Ответ 9

Да, возможно, с встроенным поведением:

• Создайте класс Dialog с двумя методами setter, setYesButtonName() и 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;
            };
        }

• Создать объект класса ConfirmDialog.

   this.CONFIRM_DIALOG = new ConfirmDialog();
  

• Вызов метода для любого события, скажем, onclick()

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

Работа выполнена!

Ответ 10

• Параметр кнопки в диалоговом окне интерфейса jQuery принимает объекты и массивы.
• Кнопки являются экземплярами виджета . Используйте API вместо того, чтобы самостоятельно манипулировать кнопками.

$(function() {
  // using textbox value instead of variable
  $("#dialog").dialog({
    buttons: [
      { text: $("#buttonText0").val(), click: function() { $(this).dialog("close"); } }, 
      { text: $("#buttonText1").val(), click: function() { $(this).dialog("close"); } }
    ]
  });
  $("#updateButtonText").on("click", function() {
    var $buttons = $("#dialog").dialog("widget").find(".ui-dialog-buttonpane button");
    console.log($buttons, $buttons.eq(0), $buttons.eq(1));
    $buttons.eq(0).button("option", "label", $("#buttonText0").val());
    $buttons.eq(1).button("option", "label", $("#buttonText1").val());
    // few more things that you can do with button widget
    $buttons.eq(0).button("option", "icons", { primary: "ui-icon-check" });
    $buttons.eq(1).button("disable");
  });
});

@import url("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Sample Dialog">
  <p>Proceed?</p>
</div>

<p style="text-align: center;">
  <input type="text" id="buttonText0" value="OK">
  <input type="text" id="buttonText1" value="Cancel">
  <input type="button" id="updateButtonText" value="Update Button Text">
</p>