Question

So I know to create multiple buttons with jQuery UI you simply do:

buttons : [{
    text  : settings.buttonText,
    click : function () { settings.buttonFunction(); }
},
{
    text  : button2Text,
    click : function () { settings.button2Function(); }
}
}]

I have a plugin I’ve created to handle & make dialogboxes similar site-wide, and recently need to add the option of passing in multiple buttons, not just 1.

Now typically this whole section doesn’t even get run unless a button is even wanted. I have a quick if (settings.buttonText) { } wrapped around it. But the problem is even though I don’t pass in button2Text etc, the button is still appearing. Besides doing some newbish thing like .hide()…

My question is: How can i have that second { text ... click ... } area be dynamic and only appear in the object if settings.button2Text is passed into the plugin? Is this even possible?

I feel like the solution is so simple I’m just braindead right now 🙂 Thanks for any input

Answer 1

You could just do the logic before you actually set that up. Something like this:

var myButtons = [{
  text  : settings.buttonText,
  click : function () { settings.buttonFunction(); }
}];

if (addSecondButton) {
  myButtons.push({
    text  : button2Text,
    click : function () { settings.button2Function(); }
  });
}

Then you can launch the dialog like this:

$(foo).dialog({buttons: myButtons})