Question

I have a jquery ui dialog which displays a set of buttons in initial load(Say ‘Add’ and ‘Close’ buttons). Later when I do something I display another set of Buttons(Say when click on ‘Add’ button I remove existing buttons and display ‘Save’ and ‘Clear’ buttons).
Again when I click on something else I display initial set of buttons.

I’m looking for an easy way to handle this button set switching in my jquery ui dialog.

*Currently Im calling the button definition wherever I wanted, but I think It is not way of doing it. Expecting your suggestions…

jQuery("#myDia").dialog({buttons: [{text:"Add", click: function() { add();}}, {text:"Close", click: function() {close();}}] });


and

jQuery("#myDia").dialog({buttons: [{text:"Save", click: function() { save();}},{text:"Clear", click: function() {clear();}}] });


Answer 1

You can define your button list in a buttons array. Ex:

var buttonOpts = {}; buttonOpts["Add"] = function () {
    add(); }; buttonOpts["Save"] = function () {
    save(); }; buttonOpts["Clear"] = function () {
    clear(); };

Then when you want you can change or switch the button list using the option method, like this:

$("#myDia").dialog('option', 'buttons', buttonOpts);

jQuery UI dialog reference: http://api.jqueryui.com/dialog/#method-option

Here is a working fiddle: http://jsfiddle.net/nGUrw/6/