jQuery UI dialog button text as a variable

Question

Can anyone tell me how can i use a variable for button text in jQuery UI dialog? I want to make a dynamic button name.

Answer 1

assign a class to the button. The button text will be in a span with a class called ui-button-text inside your defined class. So if you give your button the class .contacts-dialog-search-button then the code to access the text will be:

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

here is the code I'm using for my current projects buttons, to give you an example.

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

Answer 2

This will work $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");

Answer 3

why not a one liner...

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

Answer 4

And don't forget

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

Answer 5

This won't work because of the way jQuery handles the button name (can be with or without quotes)

This will work:

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

Answer 6

Yes completely possible with inline behaviour:

1. Create Dialog class with two setter method, setYesButtonName() and 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. Create Object of ConfirmDialog class.

    this.CONFIRM_DIALOG = new ConfirmDialog();
   

2. Call method on any event, let's say onclick()

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

Job Done!!