Javascript: How to pass a function with string parameters as a parameter to another function

Question

I need to do something like this:

<input type="button" value="click" id="mybtn" 
onclick="myfunction('/myController/myAction', 
                   'myfuncionOnOK('/myController2/myAction2', 
                                  'myParameter2');',
                   'myfuncionOnCancel('/myController3/myAction3', 
                                  'myParameter3');');"  />

The context of this question is that on the onClick I need to call a javascript function that will make an ajax call to the url I provide. It will open a modal div with OK and Cancel buttons.

Up to here it's fine. But then I also needed to tell the javascript function another function with other parameters and urls to be called when an OK button is clicked in the new div. And another one for the Cancel button.

The problem is I can't manage to pass the second argument properly as it doesn't escape properly and gives me javascript errors.

I have done a search for other similar Javascript questions in SO but non of them seem to cover what I need to do.

Anybody knows how could I pass this kind of string parameters to the javascript function? Or maybe there's another better solution of passing this things that I didn't think of.

Thanks in advance

Answer 1

One way would be to just escape the quotes properly:

<input type="button" value="click" id="mybtn"
       onclick="myfunction('/myController/myAction', 
               'myfuncionOnOK(\'/myController2/myAction2\', 
                   \'myParameter2\');',
               'myfuncionOnCancel(\'/myController3/myAction3\', 
                   \'myParameter3\');');">

In this case, though, I think a better way to handle this would be to wrap the two handlers in anonymous functions:

<input type="button" value="click" id="mybtn"
       onclick="myfunction('/myController/myAction', 
                function() { myfuncionOnOK('/myController2/myAction2', 
                             'myParameter2'); },
                function() { myfuncionOnCancel('/myController3/myAction3', 
                             'myParameter3'); });">

And then, you could call them from within myfunction like this:

function myfunction(url, onOK, onCancel)
{
    // Do whatever myfunction would normally do...

    if (okClicked)
    {
        onOK();
    }

    if (cancelClicked)
    {
        onCancel();
    }
}

That's probably not what myfunction would actually look like, but you get the general idea. The point is, if you use anonymous functions, you have a lot more flexibility, and you keep your code a lot cleaner as well.

Answer 2

Try this:

onclick="myfunction(
    '/myController/myAction',
    function(){myfuncionOnOK('/myController2/myAction2','myParameter2');},
    function(){myfuncionOnCancel('/myController3/myAction3','myParameter3');}
);"

Then you just need to call these two functions passed to myfunction:

function myfunction(url, f1, f2) {
    // …
    f1();
    f2();
}

Answer 3

Me, I'd do it something like this:

HTML:

onclick="myfunction({path:'/myController/myAction', ok:myfunctionOnOk, okArgs:['/myController2/myAction2','myParameter2'], cancel:myfunctionOnCancel, cancelArgs:['/myController3/myAction3','myParameter3']);"

JS:

function myfunction(params)
{
  var path = params.path;

  /* do stuff */

  // on ok condition 
  params.ok(params.okArgs);

  // on cancel condition
  params.cancel(params.cancelArgs);  
}

But then I'd also probable be binding a closure to a custom subscribed event. You need to add some detail to the question really, but being first-class functions are easily passable and getting params to them can be done any number of ways. I would avoid passing them as string labels though, the indirection is error prone.