jQueryUI Modal - Adding multiple buttons

Question

When using jQuery UI the buttons for a modal can be set-up after init like so:

$( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );

However what I'd like to do is add multiple buttons, dependent on logic conditions:

if ( canClose ){
    $( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );
}

if ( canAlert ){
    $( ".selector" ).dialog( "option", "buttons", { "Ok": function() { alert('Hello'); } } );
}

However the above code won't work correctly, as it resets the buttons array each time.

How can I add X number of buttons using logic, without loosing any existing buttons?

Sorcy · Accepted Answer · 2011-05-10 08:55:45Z

3

Try it like this:

var buttons = {};

if (canClose) {
     buttons.Close = function() { $(this).dialog("close"); }
}

if (canAlert) {
    buttons.Alert = function() { alert('Hello'); }
}

$(".selector" ).dialog( "option", "buttons", buttons );

Thus you only create the dialog once. Of course, the buttons need two different names, otherwise the second one will overwrite the first one. But then, not having several buttons with the same text, that's just good GUI design. ;)

answered May 10, 2011 at 8:55

Sorcy

2,6236 gold badges27 silver badges35 bronze badges

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

Comments

Josiah Ruddell · Accepted Answer · 2011-05-09 16:06:20Z

1

Use the buttons array option to create both buttons:

if ( canClose && canAlert )
    $( ".selector" ).dialog( "option", "buttons", [
        {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        },
        {
            text: "Ok",
            click: function() { alert('Hello'); }
        }
    ] );

answered May 9, 2011 at 16:06

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

1 Comment

Peter Bridger Over a year ago

@Josiah-Ruddell I'm after code that would allow all four possible button combinations through logic. Either no buttons, one button, the other button or both.

Peter Bridger · Accepted Answer · 2011-05-10 08:58:09Z

1

I've managed to achieve my aim by creating an array upfront, then assigning this to the modal buttons property:

var buttons = new Array();

if ( occurance.canEdit ){
    buttons[buttons.length] = { text: "Edit", click: function(){ editOccurance(data[0],data[1]); } };
}

if ( occurance.canDelete ){
    buttons[buttons.length] = { text: "Delete", click: function(){ deleteOccurance(data[0],data[1]); } };
}

$( "#dialogOccurance" ).dialog( "option", "buttons", buttons );

answered May 10, 2011 at 8:58

Peter Bridger

9,33316 gold badges61 silver badges89 bronze badges

Collectives™ on Stack Overflow

jQueryUI Modal - Adding multiple buttons

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related