1

Estoy tratando de llenar un modal Bootstrap al darle click al botón editar del registro correspondiente, pero me arroja el siguiente error:

Uncaught SyntaxError: missing ) after argument list

¿Qué podré estar haciendo mal? Les adjunto el código que tengo hasta ahora:

Función JavaScript para llenar los input que se encuentran en el modal:

function getData(data) {
    d = data.split('||');
    $('#idUserU').val(d[0]);
    $('#nameU').val(d[1]);
    $('#lastnameU').val(d[2]);
    $('#emailU').val(d[3]);
    $('#phoneU').val(d[4]);
}

Código PHP para llenar tabla. La variable $data me almacena todos los resultados de la consulta, y es la que le paso de parámetro a la función getData('.$data.'); que mando llamar en el botón editar:

while ($row = mysqli_fetch_array($searchUser)) {
    $data = $row[0].'||'.$row[1].'||'.$row[2].'||'.$row[3].'||'.$row[4];
    $table .=
    '<tbody><tr>
        <th style="padding-top: 10px;">'.$row[0].'</th>
        <td style="padding-top: 10px;">'.$row[1].'</td>
        <td style="padding-top: 10px;">'.$row[2].'</td>
        <td style="padding-top: 10px;">'.$row[3].'</td>
        <td style="padding-top: 10px;">'.$row[4].'</td>
        <td>
           <div class="form-inline justify-content-center">
               <button type="button" class="btn btn-primary btn-sm mx-sm-1 mx-0" data-toggle="modal" data-target="#modalUpdateUser" onclick="getData('.$data.')"><i class="fas fa-pen"></i></button>
               <button type="button" class="btn btn-danger btn-sm" onclick="deleteUser('.$row[0].')"><i class="fas fa-trash-alt"></i></button>
           </div>
        </td>
    </tr></tbody>';
}

Espero y me puedan ayudar, gracias de antemano!

1
  • No puedes pasar por parámetro una variable de PHP a una función de Javascript. Estás mezclando cliente con servidor, un error bastante común cuando se inicia con el stack de PHP y Javascript. Tienes que pedir el valor desde Javascript hacia PHP usando una llamada Ajax. Saludos Commented el 23 jul. 2021 a las 14:59

1 respuesta 1

1

Estás enviando como parámetro una cadena, pero sin encerrar entre comillas:

'... onclick="getData('.$data.') ...'

Suponiendo que los datos en $row son:

0 => 10
1 => Edgar
2 => Saavedra
3 => [email protected]
4 => 1234567

Esa línea en el navegador aparece así:

// Todo lo que sigue al 10 es lo que genera error
onclick="getData(10||Edgar||Saavedra||[email protected]||1234567)"

Podrías solucionarlo agregando comillas sencillas para encerrar la cadena, pero debes "escaparlas" anteponiendo una diagonal invertida \:

'... onclick="getData(\'' . $data . '\') ...'

Aunque no es lo ideal. Sería mejor si evitas incluir eventos directamente en las etiquetas y los asignas desde Javascript, obteniendo un HTML más limpio y mejor control sobre los eventos:

while ($row = mysqli_fetch_array($searchUser)) {
    $table .=
    '<tbody><tr>
        <th style="padding-top: 10px;">'.$row[0].'</th>
        <td style="padding-top: 10px;">'.$row[1].'</td>
        <td style="padding-top: 10px;">'.$row[2].'</td>
        <td style="padding-top: 10px;">'.$row[3].'</td>
        <td style="padding-top: 10px;">'.$row[4].'</td>
        <td>
           <div class="form-inline justify-content-center">
               <button type="button" class="btn btn-primary btn-sm mx-sm-1 mx-0" data-toggle="modal" data-target="#modalUpdateUser"><i class="fas fa-pen"></i></button>
               <button type="button" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i></button>
           </div>
        </td>
    </tr></tbody>';
}

En PHP, no necesitas la variable $data porque ya tienes toda la información necesaria en cada celda. Tampoco asignas evento a los botones, eso lo haces directamente en Javascript.

Ya que estás usando jQuery puedes delegar el evento clic al cuerpo de la tabla:

// Escuchar clics en cuerpo de tabla
// Y "filtrar" para obtener solo botones para modificar, por su clase
$('#id-de-tabla tbody').on('click', 'btn-primary', function() {
    // $(this) representa el botón que recibió clic
    // Con .closest() puedes acceder al padre (fila de la tabla)
    let tr = $(this).closest('tr');
    // Con .find() obtienes todas las celdas de la fila
    let celdas = $(tr).find('td');
    // Usas .eq() para acceder a cada celda por su posición (0 en adelante)
    // .text() devuelve el contenido del elemento
    $('#idUserU').val($(celdas).eq(0).text());
    $('#nameU').val($(celdas).eq(1).text());
    $('#lastnameU').val($(celdas).eq(2).text());
    $('#emailU').val($(celdas).eq(3).text());
    $('#phoneU').val($(celdas).eq(4).text());
});

// Función para eliminar
$('#id-de-tabla tbody').on('click', 'btn-danger', function() {
    // Simplificando con una sola línea para obtener ID
    let id = $(this).closest('tr').find('td').eq(0).text();
});
1
  • Sí me funcionó! Muchas gracias por tu apoyo y recomendaciones amigo :) Commented el 23 jul. 2021 a las 15:34

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.