1

Tengo que pasar los parámetros de la función de mi button en forma de cadena.

Cuando lo hago con PHP me sale bien con el json_encode pero lo mismo quiero hacer con Javascript, pero no me sale.

La imagen de como debe salir

introducir la descripción de la imagen aquí

Como me esta saliendo

introducir la descripción de la imagen aquí

Mi código JS

function ActualizarEstadoAuto() {

   var urlver = $("#verAuto").attr('href');
   var urleditar = $("#editarAuto").attr('href');
    var form = $("#form-estado");
    var urld =  form.attr('action').replace('id',$("#idauto").val());


    var formdata = form.serialize();

    $("#tabla_auto").empty();

    var rows = '';

var i=1;
    $.post({
        url: urld,
        data: formdata,
        dataType: 'json',
        success : function (res) {
          $(res).each(function (key,value) {
              console.log(res);

              rows = rows + '<tr>';
              rows = rows + '<td>'+i+'</td>';
              rows = rows + '<td>'+value.modelo.nombre+'</td>';
              rows = rows + '<td>'+value.categoria.nombre+'</td>';
              rows = rows + '<td>'+value.version+'</td>';
              rows = rows + '<td>'+value.precio_soles+'</td>';
              rows = rows + '<td>'+value.precio_dolares+'</td>';
              rows = rows + '<td>'+value.estado+'</td>';
              rows = rows + '<td>';
              rows = rows + '<a  href="'+urlver+'" class="btn btn-outline btn-success"><i class="fa fa-eye"></i></a> ';
              rows = rows + '<a  href="'+urleditar+'" class="btn btn-outline btn-primary"><i class="fa fa-pencil"></i></a>';
              rows = rows + '<button class="btn btn-outline btn-default" onclick="cambiarEstadoAuto('+ JSON.stringify(value.modelo.nombre)+','+JSON.stringify(value.categoria.nombre)+','+JSON.stringify(value.idAutos)+','+JSON.stringify(value.estado)+')" > <i class="fa fa-exchange"></i></button>';
              rows = rows + '</td>';


    rows = rows + '</tr>';

         i++;
      });

        $("tbody").html(rows);
    }

});


}

El problema es en el button.

3
  • 1
    solo cambia las comillas dobles interiores por comillas simples y el numero igual manda con comillas simples, facil y basico deberias de leer un poco mas sobre cosas como esa.
    – Shassain
    Commented el 3 ene. 2018 a las 15:32
  • Intenta esto:'<button class="btn btn-outline btn-default" onclick="cambiarEstadoAuto('+ "'" + JSON.stringify(value.modelo.nombre) + "'" +','+ "'" +JSON.stringify(value.categoria.nombre)+ "'" +','+ "'" +JSON.stringify(value.idAutos)+ "'" +','+ "'" +JSON.stringify(value.estado)+ "'" +')" > <i class="fa fa-exchange"></i></button>' , si te funciona me avisas para ponerla como respuesta.
    – Andrés
    Commented el 3 ene. 2018 a las 15:41
  • ya lo puse, no funciona sale mas comillas :(
    – ingswsm
    Commented el 3 ene. 2018 a las 15:44

4 respuestas 4

2

Tu problema es que al usar JSON.stringify éste te genera las comillas dobles por cada parámetro que vas a enviar y esas comillas generan conflicto con las que ya tienes.

Veo una solucion y es cambiar a comillas simples el valor del atributo onclick para llamar la función y luego escaparlas:

'<button class="btn btn-outline btn-default" onclick=\'cambiarEstadoAuto('+ JSON.stringify(value.modelo.nombre)+','+JSON.stringify(value.categoria.nombre)+','+JSON.stringify(value.idAutos)+','+JSON.stringify(value.estado)+')\'> <i class="fa fa-exchange"></i></button>'
3
  • gracias camilo, pero necesito pasar como cadena , al hacer lo que me mandaste no me reconoce como cadena necesito que quede asi "..", si lo mando asi me sale error por que tiene un espacio las oraciones
    – ingswsm
    Commented el 3 ene. 2018 a las 16:05
  • @ingswsm ah entiendo, y aplicando el escape al momento de llamar la función tampoco te funciona? Commented el 3 ene. 2018 a las 16:07
  • gracias camilo por tomarte el tiempo camilo ya puse la respuesta correcta
    – ingswsm
    Commented el 3 ene. 2018 a las 16:16
1

El problema es que la hacer JSON.stringify(valor), el valor generado incluye comillas dobles (") y esto provoca que el HTML se rompa.

Solución:

Una solución es, que para aquellos valores que son cadenas, agrega una comilla simple (') escapada (\), antes y después de concatenar el valor, en lugar de usar JSON.stringify.

Ejemplo:

rows = rows + '<button class="btn btn-outline btn-default" onclick="cambiarEstadoAuto(\''+ value.modelo.nombre+'\',\''+value.categoria.nombre+'\','+value.idAutos+','+value.estado+')" > <i class="fa fa-exchange"></i></button>';
1
  • gracias amigo esta es la respuesta !
    – ingswsm
    Commented el 3 ene. 2018 a las 16:15
0

Si vas a usar comillas dobles, dentro de esas comillas dobles deben tener comillas simples, sino, el navegador lo interpretará como variables o como sus semejantes, sean funciones nativas o no nativas de javascript. Lo mismo pasa si usas comillas simples, dentro de una función deben ir comillas dobles, excepto si vas a usar variables. Intenta esto: rows +='<button class="btn btn-outline btn-default" onclick="cambiarEstadoAuto(\"'+ value.modelo.nombre+'\",\"'+value.categoria.nombre+'\",\"'+value.idAutos+'\",\"'+value.estado+'\")" > <i class="fa fa-exchange"></i></button>';

PD: a tu variable rows, en vez de usar rows = rows +'...HTML...' podrías usar rows+='...HTML...', es lo mismo pero mucho mas simple, quita menos trabajo.

3
  • gracias, pero mee sale con mas comillas
    – ingswsm
    Commented el 3 ene. 2018 a las 16:07
  • Si, perdon, se me habia olvidado el JSON.Stringify, quitaselo! Commented el 3 ene. 2018 a las 16:07
  • gracias angel por el tiempo ya puse la respuesta correct
    – ingswsm
    Commented el 3 ene. 2018 a las 16:17
0

La respuesta es:

<button class="btn btn-outline btn-default" onclick="cambiarEstadoAuto('Buster boyle','Automoviles','1,0')"> contenido de botón </button>

En el Javascript:

rows = rows + '<button class="btn btn-outline btn-default" onclick="cambiarEstadoAuto(\''+ JSON.stringify(value.modelo.nombre)+'\',\''+JSON.stringify(value.categoria.nombre)+'\',\''+JSON.stringify(value.idAutos)+'\',\''+JSON.stringify(value.estado)+'\')" > <i class="fa fa-exchange"></i></button>'
3
  • pero los datos que estan dentro de la funcion estan como variables <button class="btn btn-outline btn-default" onclick="cambiarEstadoAuto('+ JSON.stringify(value.modelo.nombre)+','+JSON.stringify(value.categoria.nombre)+','+JSON.stringify(value.idAutos)+','+JSON.stringify(value.estado)+')" > <i class="fa fa-exchange"></i></button>';
    – ingswsm
    Commented el 3 ene. 2018 a las 15:46
  • nada amigo , tu codigo me da mas comillas gracias
    – ingswsm
    Commented el 3 ene. 2018 a las 16:11
  • gracias shassain
    – ingswsm
    Commented el 3 ene. 2018 a las 16:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.