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 onClick necesito llamar a una función javascript 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 luego también necesitaba decirle a la función de JavaScript otra función con otros parámetros y direcciones URL a las que llamar cuando se hace clic en el 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 se escapa correctamente y me da errores de JavaScript.

He buscado otras preguntas similares de Javascript en SO, pero ninguna de ellas parece cubrir lo que necesito hacer.

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

Gracias de antemano

19
antonioh 26 may. 2009 a las 12:39

3 respuestas

La mejor respuesta

Una forma sería escapar de las citas correctamente:

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

Sin embargo, en este caso, creo que una mejor manera de manejar esto sería envolver los dos controladores en 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, podría llamarlos desde 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 vería 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.

18
hbw 26 may. 2009 a las 09:06

Prueba esto:

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

Entonces solo necesita llamar a estas dos funciones que se pasaron a myfunction:

function myfunction(url, f1, f2) {
    // …
    f1();
    f2();
}
7
Gumbo 26 may. 2009 a las 08:57

Yo, 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 probablemente estaría vinculando un cierre a un evento suscrito personalizado. Realmente necesita agregar algunos detalles a la pregunta, pero ser las funciones de primera clase son fácilmente transitables y se pueden obtener parámetros para ellos de muchas maneras. Sin embargo, evitaría pasarlos como etiquetas de cadena, la indirección es propensa a errores.

4
annakata 26 may. 2009 a las 08:56