Question

See Edit below initial question for a revised version of the original problem

Using a jquery-ui dialog I want to be able to specify the label on the button dynamically.

To do this I’m specifying an array of buttons like this :

var arrbuttons = {};
arrbuttons.cancel = function() { alert('test1');};
arrbuttons.update = function() { alert('test2');};
    $(function() {
      $( "#dialog" ).dialog({buttons: arrbuttons});
    });

I got that from this stackoverflow answer and it works fine as far as it goes.

What I would like to know now is how I can setup the array so the label of each button is specified for each element of ‘arrbuttons’.

The jquery-ui documentation shows how to do this with an inline array like this :

$( ".selector" ).dialog({ buttons: [
    {
        text: "Ok",
        click: function() { $(this).dialog("close"); }
    }
] });

But there’s no example in the jquery doco which corresponds to the answer I’m basing my attempt on.

Anyone know ?

---

OK I’ve now worked on this a little more. By doing the following I can specify the text of the buttons. The trouble is the function part no longer works (ie the buttons are labelled ‘wow!’ and ‘kapow!’ but when you click on them nothing happens.

var arrbuttons = {};
arrbuttons.cancel = {click: "function() { alert('test1');}", text:"wow!"};
arrbuttons.update = {click: "function() { alert('test2');}", text:"kapow!"};
$(function() {
    $( "#dialog" ).dialog({buttons: arrbuttons});
});

Any ideas of how to do this ?

Answer 1

remove the double quotes around function statement