Question

I would like to pass the function some javascript to be executed when the user presses one of the buttons, but currently when I press the “No” or “Yes” buttons on the dialog box nothing happens, it just sits there…no error shows in firebug. If I hard code “alert(‘hi’)” into the dialog button it works fine, so there must be something in passing the javascript as part of the function parameters.

How can I get this to work? Thanks in advance.

Heres my javascript function:

function confirm_yes_no(xtitle,msg, btn_yes_txt, btn_no_txt, btn_yes_js, btn_no_js)
{
    var button_yes = btn_yes_txt;
    var button_no = btn_no_txt;
    var dialog_buttons = {};

    dialog_buttons[button_yes] = function(){ btn_yes_js }
    dialog_buttons[button_no] = function(){ btn_no_js }

    $("#modal_confirm_yes_no").html(msg);
    $("#modal_confirm_yes_no").dialog({
                title: xtitle,
                bgiframe: true,
                autoOpen: false,
                height: 150,
                width: 300,
                modal: true,
                buttons: dialog_buttons
            });

    $("#modal_confirm_yes_no").dialog("open");
}

Here’s how I call the function:

confirm_yes_no("Print Checks", "Would you like to print checks now?", "Yes", "No", "alert('you clicked yes');", "alert('you clicked no');");

Answer 1

If btn_yes_js is a reference to a Javascript function just do:

dialog_buttons[button_yes] = btn_yes_js;

and likewise for btn_no_js.

If instead what you’re saying is that btn_yes_js is a string containing the source of a JS function, and it appears that you are – DON’T DO THAT!!

Your call should look like:

confirm_yes_no("Print Checks", "Would you like to print checks now?", "Yes", "No",
    function() {
       alert('you clicked yes');
    },
    function() {
       alert('you clicked no');
    }
);

i.e. pass in references to functions (anonymous functions in this example), not strings that would have to be passed to the nasty, horrible, never-ever-use-on-pain-of-death eval() function.

See http://jsfiddle.net/alnitak/WHeRF/

I’d also note that your code ultimately will need more work, since whilst you’re registering callback handlers, neither of them actually close down or destroy the dialog box.

You’ll actually need something more like:

dialog_buttons[button_yes] = function() {
    $('#modal_confirm_yes_no').dialog('close').dialog('destroy');
    btn_yes_js.call(ctx);
}

i.e. a local function which closes the dialog box cleanly, and then invokes the relevant callback function. You may wish to add your own ctx variable which will become the value of this within your callbacks.