3

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
cssyphus
  • 37,875
  • 18
  • 96
  • 111

1 Answers1

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

Jérôme
  • 2,070
  • 15
  • 21
  • Right you are... and I thought I'd tried everything. Still, [the api documentation](http://api.jqueryui.com/dialog/#option-buttons) seems to infer that my OP syntax was correct? What's up with that..? – cssyphus Jun 09 '13 at 19:44
  • 1
    If you prefer the `array` notation, you must have an `array of objects`, see my edit :-) – Jérôme Jun 09 '13 at 19:51
  • Thank you so much for explaining that. So *that's* what the square brackets were about... Makes sense now. I appreciate the additional example. – cssyphus Jun 09 '13 at 19:53