Javascript: ¿Cómo pasar de una función con parámetros de cadena como parámetro a otra función

Question

Necesito hacer algo como esto:

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

El contexto de esta pregunta es que en el onClick Tengo que llamar a un javascript función que hará una llamada ajax a la url que proporciono. Se abrirá un div modal con los botones Aceptar y Cancelar.

Hasta aquí está bien. Pero también necesitaba decirle a la función javascript otra función con otros parámetros y direcciones URL a las que llamar cuando se hace clic en un botón Aceptar en el nuevo div. Y otro para el botón Cancelar.

El problema es que no puedo pasar el segundo argumento correctamente, ya que no escapa correctamente y me da errores de JavaScript.

He hecho una búsqueda para otras preguntas similares de Javascript en SO pero ninguna de ellas parece cubrir lo que tengo que hacer.

¿Alguien sabe cómo puedo pasar este tipo de parámetros de cadena a la función javascript? O tal vez hay otra solución mejor para pasar estas cosas en las que no pensé.

Gracias de antemano

Answer 1

Una forma sería simplemente escapar de las comillas correctamente:

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

En este caso, sin embargo, creo que una mejor manera de manejar esto sería para envolver los dos manejadores de funciones anónimas:

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

Y luego, se les puede llamar desde el interior de myfunction así:

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

    if (okClicked) 
    { 
     onOK(); 
    } 

    if (cancelClicked) 
    { 
     onCancel(); 
    } 
} 

Probablemente no sea así como se ve realmente myfunction, pero se entiende la idea general. El punto es que si usa funciones anónimas, tiene mucha más flexibilidad y también mantiene su código mucho más limpio.

Answer 2

mí, lo haría algo como esto:

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); 
} 

Pero entonces también me probablemente sea vinculante un cierre a un evento suscrito personalizado. Es necesario agregar algunos detalles a la pregunta realmente, pero al ser first-class las funciones son fácilmente pasables y obtener params se puede hacer de muchas maneras. Sin embargo, evitaría pasarlos como etiquetas de cadena, la indirección es propensa a errores.

Answer 3

Prueba esto:

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

continuación, sólo tiene que llamar a estas dos funciones pasaron a myfunction:

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