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

Question

I need to do something like this    lt input type  button  value  click  id  mybtn   onclick  myfunction   myController myAction                        myfuncionOnOK   myController2 myAction2                                       myParameter2                          myfuncionOnCancel   myController3 myAction3                                       myParameter3           gt    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

User · Accepted Answer

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.

User · Answer

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

User · Answer

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

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

Examples related to javascript