Changing text within jqueryUI dialog button after it is open

Question

How can I change the text for the cancel button from CANCEL to CLOSE? Thanks!

$("#dialog").dialog({
    buttons     : [
        {
            text    : 'SAVE',
            click    : function() {}
        },
        {
            text    : 'CANCEL',
            click    : function() {}
        }
    ]    
});
$("#button").click(function(){alert('Please change cancel button text from "CANCEL" to "CLOSE"');});

<div id="dialog"><button id="button">Change cancel button text from "CANCEL" to "CLOSE"</button></div>

@ExplosionPills. Want it to start off with given text of "CANCEL", but when later the user clicks the button, the text will change to "CLOSE". Note that the button is within the dialog. — user1032531
– user1032531, Commented Nov 29, 2012 at 3:42
Have you tried the setter from the documentation? api.jqueryui.com/dialog/#option-buttons — greener
– greener, Commented Nov 29, 2012 at 3:49
@greener Maybe I don't understand, but I don't think this applies. — user1032531
– user1032531, Commented Nov 29, 2012 at 4:01

mattn · Accepted Answer · 2012-11-29 04:04:41Z

12

Specify class name to your dialog, and select UI buttons from the class.

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

answered Nov 29, 2012 at 4:04

mattn

7,77333 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1032531 Over a year ago

Thanks mattn. Didn't know about dialogClass. Seems like it will work. I also don't know about how you used ...uton-text:contains(CANCEL). Will you please elaborate? Thanks

mattn Over a year ago

@user1032531 haha, It's possible to write $.each('.my-dialog .ui-button-text', function(){...}) but too long for me. ;)

user1032531 Over a year ago

Understood about typing too much :) Still uncertain how this will work. I will experiment.

mattn Over a year ago

ui-button-text class elements are not located with non-related your dialog. So it can't use selector passed from dialog class. So I put dialogClass to the dialog. Then you can use selector through over the dialog class. And contains() is sizzle selector that can select element which contains specified text. i.e. this code changes is possible to change dialog buttons dyamicaly.

user1032531 Over a year ago

Thanks, I will give that a try. Sorry but getting sleepy and will not be able to confirm til tomorrow.

Олег Всильдеревьев · Accepted Answer · 2014-10-14 11:56:25Z

9

It is a really simple thing :)

$( "#dialog" ).dialog( {
    "buttons" : [
    {
        id: "my-button",
        text: "My button",
        click:function() {
            $("#my-button span").text( "Our button!:)" );
        }
    } ]
} );

answered Oct 14, 2014 at 11:56

Олег Всильдеревьев

94310 silver badges11 bronze badges

Comments

greener · Accepted Answer · 2012-11-29 04:10:18Z

3

You can set the text of the button outside the initialization (documentation):

$( "#dialog" ).dialog({
    autoOpen: true,
    buttons: [{
        text: "Cancel",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});
$( "#dialog" ).dialog( "option", "buttons", [ { text: "Close", click: function() { $( this ).dialog( "close" ); } } ] );

You can also bind it to an event.

answered Nov 29, 2012 at 4:10

greener

5,06913 gold badges56 silver badges98 bronze badges

5 Comments

user1032531 Over a year ago

Thanks greener. How does this target the cancel button and not the save button?

greener Over a year ago

It doesn't. But am I right in guessing that you're changing the text as a result of data being sent to the server ('Save') and want to present the user with a button to close the dialog?

user1032531 Over a year ago

Pretty much as you say. A new dialog is open which shows an open input form with a cancel/save button. User clicks cancel and it obviously closes. User clicks save, and the open input changes to non-editable text (but there is an edit button nearby), and the cancel button change close. User clicks the edit button, and the close dialog buttons change from close to cancel

greener Over a year ago

So in fact it's Save/Cancel then Edit/Close. Save and Edit have their own behavior and because Cancel/Close are the same (they close the dialog), you just want to change the text. Seems like mattn's solution fits. Alternatively, write all the buttons and hide and show as required.

user1032531 Over a year ago

Yes, I started to go down the create too button approach, but thought there had to be a better awy.

Chris Rosete · Accepted Answer · 2021-08-27 00:01:17Z

0

Important to add the []

buttons: [{
            text: "Close",
            click: function () {
                $(this).dialog("close");
            }
        }]

answered Aug 27, 2021 at 0:01

Chris Rosete

1,26815 silver badges14 bronze badges

Collectives™ on Stack Overflow

Changing text within jqueryUI dialog button after it is open

4 Answers 4

5 Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related