Change the Jquery Dialog Button Text

Question

I need to change the text of my dialog button but I have 3 dialog buttons with me and I only need to change one of them.

i have this jquery code:

$("dialog").dialog({
height: 600,
width: 1000,
modal: true,
resizable: false,
buttons: {
     "Upload": function() {
           alert("Upload");
      }
     "Edit": function() {
           $('#dialog').dialog("option", "buttons",[
                    {
                        text: "Save",
                        click: function () {
                            alert("Save");
                        } 
                    }
                ]);
      }
     "Delete": function() {
           alert("Delete");
      }
}

This solution change the Edit Button to Save button but it removes the Upload and Delete button. I may add the Upload and Delete again inside the Edit function but I think it doesn't look good that way.

Please let help me have a better solution with this.

Thank you.

The [link](http://stackoverflow.com/a/4704177/473016) may help — anpsmn, Apr 18 '13 at 10:41

score 2 · Answer 1 · answered Apr 18 '13 at 10:44

2

try this

 buttons:
            [
              {
                  text: "Your name"

              }
            ]

or

$('selector').dialog({
    buttons: {
        OK: function() {
            alert(1);
        }
    },
    dialogClass: 'my-dialog'
});
$('.my-dialog .ui-button-text:contains(OK)').text('CANCEL');

answered Apr 18 '13 at 10:44

PSR

39,804
41
111
151

Thanks PSR, this one answers my additional question to Colin Pickard :) – SyntaxError Apr 18 '13 at 12:25

score 1 · Accepted Answer · answered Apr 18 '13 at 10:54

You can assign a class to your button when you create it, giving you a nice clean way to reference it.

Here's a working example on jsfiddle and the revised code:

$("#dialog").dialog({
height: 600,
width: 1000,
modal: true,
resizable: false,
        buttons:
            [
              {
                  text: "Upload",
                  click: function() {
                     alert("Upload");
                  }
              },
              {
                  text: "Edit",
                  click: function() {
                    $(".editbutton > .ui-button-text").text("Save"); 
                  },
                  'class': 'editbutton'
              },
                {
                  text: "Delete",
                  click: function() {
                     alert("Delete");
                  }
              }
            ]
    });

Thanks this definitely worked! How about when I try clicking the Save Button and bring it back to Edit Button? Again, Thanks :) — SyntaxError, Apr 18 '13 at 12:22
I got the answer to my question from PSR's answer below. Thanks :) — SyntaxError, Apr 18 '13 at 12:25

score 0 · Answer 3 · answered Apr 15 '17 at 01:36

As Colin points out you can assign a class, id and behaviors to buttons in the declaration of the dialog. In order to locate and change text after the dialog is created use something like:

$('#button-id').click(function(){
    $(this).children('ui-button-text').text("new text");
});

Change the Jquery Dialog Button Text

3 Answers3