passing javascript to a javascript function

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');");

Alnitak · Accepted Answer · 2011-06-30 20:21:57Z

4

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.

edited Jun 30, 2011 at 20:21

answered Jun 30, 2011 at 20:09

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

1 Comment

Alnitak Over a year ago

@Ronedog I updated the fiddle to incorporate the last couple of paragraphs, showing how to close the dialog and then invoke the callback.

jessegavin · Accepted Answer · 2011-06-30 20:10:50Z

1

You could pass in actual functions for the last two arguments.

function handleNo() {
   alert('you clicked no');
}

function handleYes() {
   alert('you clicked yes');
}

confirm_yes_no(
  "Print Checks", 
  "Would you like to print checks now?", 
  "Yes", 
  "No", 
  handleYes, 
  handleNo);

Then you would change these two lines inside your main function

dialog_buttons[button_yes] = btn_yes_js;
dialog_buttons[button_no] = btn_no_js;

answered Jun 30, 2011 at 20:10

jessegavin

75.9k28 gold badges141 silver badges165 bronze badges

Comments

TheITGuy · Accepted Answer · 2011-06-30 20:10:23Z

0

I think you would be better off having the alert inside of the called function, and passing the message you want to output in the alert to the function.

answered Jun 30, 2011 at 20:10

TheITGuy

7225 silver badges15 bronze badges

1 Comment

TheITGuy Over a year ago

@Alnitak - If you require the callbacks to be different in different situations, then true. Looking at your alert example, i assumed it was a simple message.

Peter Örneholm · Accepted Answer · 2011-06-30 20:11:35Z

Pass them as functions instead.

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] = btn_yes_js
    dialog_buttons[button_no] = 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");
}

Call it by:

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

Ruan Mendes · Accepted Answer · 2011-06-30 20:13:21Z

Instead of taking JS strings, you should just take callbacks.

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

    dialog_buttons[button_yes] = yesCallBack;
    dialog_buttons[button_no] = noCallBack;

    $("#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");
}

Then you can call it 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');}
);

BrunoLM · Accepted Answer · 2011-06-30 20:14:02Z

0

Change to

dialog_buttons[button_yes] = btn_yes_js;
dialog_buttons[button_no] = btn_no_js;

And send the function directly

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

You can execute it calling the function:

dialog_buttons[button_yes]();
dialog_buttons[button_no]();
btn_yes_js();
btn_no_js();

answered Jun 30, 2011 at 20:14

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Comments

jfriend00 · Accepted Answer · 2011-06-30 20:19:52Z

0

It would be a lot simpler and easier to just use the built-in ok/cancel prompt:

if (window.confirm("Would you like to print checks now?"))  {
    alert("You clicked yes");
} else {
    alert("You clicked no");
}

edited Jun 30, 2011 at 20:19

answered Jun 30, 2011 at 20:12

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

6 Comments

Ruan Mendes Over a year ago

Not adrressing the real question, OP wants to know how to specify code to be run when something happens

jfriend00 Over a year ago

You can run code based on which button is pressed. It's a modal dialg that asks a question and has two buttons, same as what the OP posed and that seems to be the point of the problem to be solved. This method is a little less flexible in terms of button names, but I posed it because it's massively simpler and accomplishes the same job with a lot less code if you're OK with ok/cancel for the button names. Sometimes people aren't aware of the simpler options.

Ruan Mendes Over a year ago

Suggestions that don't address the real question are better off as comments than answers, Flexibility of the text to display as the buttons are clearly part of the requirement since the functions takes the labels as parameters.

Alnitak Over a year ago

@jfriend00 the other problem with window.confirm() is that it completely blocks the event queue which prevents anything else from being processed (e.g. timer tasks).

jfriend00 Over a year ago

Correct that it blocks. I thought that was the intent of the user flow (variables are named "modal"). Alternative suggestions that are simpler and solve the same problem posed should be considered. I'm fine with the OP choosing something else, just thought this was worth offering because it was so dirt simple. Can't really put useful code examples in a comment. I think your point has been made and other solutions are out there now too. The OP can decide what they like. I've been on SO a week, learning my way around - trying to be helpful.

|

Collectives™ on Stack Overflow

passing javascript to a javascript function

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related