Dynamically changing jQueryUI dialog buttons

Question

Attempting to change multiple jQuery UI dialog() buttons on the fly.

The problem with below code is that only one button is displayed at the first instance of the dialog(). Two buttons should be displayed.

jsFiddle here:

$(function(){
    var dlg = $('#message');

    dlg.dialog({
        autoOpen:false,
        modal:true,
        width: 500,
        close: function() {
            if (seen==0 && ans > 0) {
                cnt++;
                seen++;
                dlg.html('Here is a second message');
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'OK',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
        }
    });

    $('#myDiv').hover(
        function() {
            //Hover-in
            if (cnt < 1 || (cnt > 2 && cnt < 4) || (cnt > 5 && cnt < 7)) {

                var msg = 'First display text goes here';
                dlg.html(msg);
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'Download',
                            click: function() {
                                ans++;
                                $(this).dialog('close');
                            },
                            text: 'Not now',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
            cnt++;
        },
        function() {
            //Hover-out
            //need this to prevent duplicating hover-in code (double-display dlg)
        }
    );

}); //END document.ready

Jérôme · Accepted Answer · 2013-06-09 19:50:44Z

16

I have tried to use the Object type for the buttons and it works :

dlg.dialog(
    'option',
    'buttons', {
        "Download": function () {...},
        "Not now": function () {...}
    }
);

See updated jsFiddle

Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.

EDIT : But you had an error in your array, you must have an array of object and there were missing { and }.

'buttons', [
    {
        text: "Download",
        click: function () {...}
    },
    {
        text: "Not now",
        click: function () {...}
    }
]

See correction of your jsFiddle

edited Jun 9, 2013 at 19:50

answered Jun 9, 2013 at 19:38

Jérôme

2,09015 silver badges21 bronze badges

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

3 Comments

cssyphus Over a year ago

Right you are... and I thought I'd tried everything. Still, the api documentation seems to infer that my OP syntax was correct? What's up with that..?

Jérôme Over a year ago

If you prefer the array notation, you must have an array of objects, see my edit :-)

cssyphus Over a year ago

Thank you so much for explaining that. So that's what the square brackets were about... Makes sense now. I appreciate the additional example.

Collectives™ on Stack Overflow

Dynamically changing jQueryUI dialog buttons

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related