jQuery UI dialog button text as a variable

Admin 1
Viewed 61062

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.

jquery-ui-dialog jquery-ui variables jquery
13 Answers

The problem here is that the dialog plugin does not assign an id to its buttons, so it's quite difficult to modify them directly.

Instead, initialise the dialog as normal, locate the button by the text it contains and add an id. The button can then be accessed directly to change the text, formatting, enable/disable it, etc.

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

Maybe I'm missing the point - but wouldn't the easiest way be to use the setter? 

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

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

I wanted to put a coding example to show the approach that was most upvoted on this page. The point is to show the breaking out of the buttons array in showYesNoDialog() so that the button names can be customized.

<script src="jquery-3.6.0.js"></script>
<script src="jquery-ui.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //alert('dom ready');
        
        WireEvents();
        
        showYesNoDialog(
            '#dialog',
            'Dialog Title2',
            '#dialogDecision',
            "'Yes, I do!'", 
            "'No'",
            'Apparently, you did!!',
            'Chicken!!',
            false);                             
    });
    
    function showYesNoDialog(dlgId, dlgTitle, msgId, yesText, noText, yesMsg, noMsg, isModal) {
        
        var dialog_buttons = {};
        
        dialog_buttons[yesText] = function(){
            closeDialog(dlgId);
            setMessage(msgId, yesMsg);
        };
        
        dialog_buttons[noText] = function() { 
            closeDialog(dlgId);
            setMessage(msgId, noMsg);
        };
        
        
        $(dlgId).dialog({
                title : dlgTitle,
                autoOpen : false,
                modal : isModal,
                resizable: false,
                position: "top",
                buttons: dialog_buttons                 
                //buttons: {
                //  yesText : function() {                          
                //      closeDialog(dlgId);
                //      setMessage(msgId, yesMsg);                          
                //  },
                //  noText : function() {                           
                //      closeDialog(dlgId);
                //      setMessage(msgId, noMsg);
                //  }
                //}     
        });
        
        
    };
    
    function WireEvents() {
        // Wire up button
        $('#openDialog').click(function() {                 
            clearMessage('#dialogDecision');
            openDialog('#dialog');
        }); 
    };
    
    function openDialog(dlgId) {
        $(dlgId).dialog('open');            
    };
    
    function closeDialog(dlgId) {
        $(dlgId).dialog('close');           
    };
    
    function setMessage(divId, strMsg) {
        $(divId).text(strMsg);
    };
    
    function clearMessage(divId) {
        $(divId).text('');
    };
</script>   

<body>
<h1>jQuery Widgets</h1>
<hr />
<h3>The dialog</h3> 
    <div id="dialog">
        <!-- <img src="images/danger.jpg" /> -->
        <p>Are you sure you want to do this?</p>
    </div>          
    <div id='dialogDecision'>You have a decision to make.</div>
    <hr />
    <input type="button" value="click me!" id="openDialog" />       
<hr />
user_22084610
Related