jQuery-ui dialog dynamic buttons, change text and function

Question

So I have a default dialog with 2 buttons defined. In my code, it looks the following:

    var defaultButtons = [{
    text: "default"
},

    {
        text: "default"
    }
    ];
    
    $(document).ready(function () {
        $("#dialog-confirm-dynamic").dialog({
            position: {
                my: "center 10%+center",
                at: null,
                of: window
            },
            autoOpen: false,
            resizable: false,
            maxWidth: 250,
            maxHeight: 150,
            width: 250,
            height: "auto",
            modal: true,
            buttons: defaultButtons
        });
    });
    
    function showConfirm() {
        document.getElementById("confirm-dyn-inner").innerHTML = "Are you sure to do this ?";
        $("#dialog-confirm-dynamic").dialog({ title: "Delete" });
        defaultButtons[] = [{
            text: "Delete",
            click: function () {
                document.form.submit();
            }
        },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ];
        $("#dialog-confirm-dynamic").dialog("open");
    }

In showConfirm() I'm trying to change the text and behaviour of the buttons, but I suspect that they have already been rendered and changing values of the array, even before "open" is not changing anything.

What is the best way to approach this? TIA

defaultButtons[] = ... is invalid JS syntax. You shouldn't have [] there. — Barmar
– Barmar, Commented May 1 at 19:25
And even if it were valid syntax, what's the point of it? Reassigning the variable won't change the state of the dialog. — Barmar
– Barmar, Commented May 1 at 19:27

user9671207 · Accepted Answer · 2025-05-01 20:28:04Z

0

Solved. I achieved what I needed with the following code:

Extended the dialog definition with

$('.ui-dialog-buttonpane button:contains("Default")').attr("id", "dialog_default-button");

And the showConfirm function needs this code before opening the dialog:

$("#dialog_default-button").unbind("click").click(
    function () {
        document.form.submit();        
    }
 )

answered May 1 at 20:28

user9671207

413 silver badges9 bronze badges

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

1 Comment

Barmar May 1 at 20:29

unbind() and bind() have been deprecated for years, you should use .off() and .on().

Collectives™ on Stack Overflow

jQuery-ui dialog dynamic buttons, change text and function

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related