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.

Answer 1

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