0

Estoy intentando hacer una tabla y estoy teniendo problemas con el botón de editar. Quiero que al dar click en este botón se carguen los datos que están en la tabla al formulario desde la BD. Entonces para esto quiero mandar la cadena que obtengo de la base de datos con fetch a una función de javascript:

$statement = $conexion->prepare('SELECT idMascota, Nombre_mascota, Tipo_mascota, Raza_mascota, Color_mascot, Foto_mascota, Residente_idResidente FROM mascota WHERE  Residente_idResidente = :idResidente ');
            $statement->execute(array(':idResidente' => $idResidente)); 
            //print_r($statement->fetch(PDO::FETCH_ASSOC));/*regresa Array ( [idMascota] => 1 [Nombre_mascota] => Zeus [Tipo_mascota] => Perro [Raza_mascota] => French Poodle [Color_mascot] => Cafe [Foto_mascota] => (regresa la imagen en binario ���J...)

        /*  $row2 = $statement->fetch(PDO::FETCH_ASSOC);
            echo json_encode($row_json); regreso null*/ 


            while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {//FETCH_ASSOC  me regresa un array con todos los elementos
                $mascota = array('idMascota' => $row['idMascota'],
                                 'Nombre_mascota' => $row['Nombre_mascota'],
                                 'Tipo_mascota' => $row['Tipo_mascota'],
                                 'Raza_mascota' => $row['Raza_mascota'],
                                 'Color_mascot' => $row['Color_mascot'], 
                                 'Foto_mascota' => base64_encode($row['Nombre_mascota']),);

         ?>
        <tr>
            <td><?php echo $row['Nombre_mascota'] ?></td><!--llamo al elemento Nombre_mascota-->
            <td><?php echo $row['Tipo_mascota'] ?></td><!--llamo al elemento Tipo_mascota-->
            <td><?php echo $row['Raza_mascota'] ?></td><!--llamo al elemento Raza_mascota-->
            <td><?php echo $row['Color_mascot'] ?></td><!--llamo al elemento Color_mascot-->
            <td><img height="70px" src="data:image/jpg;base64,<?php echo base64_encode($row['Foto_mascota']); ?>"/></td>    

            <td>
                <button class="btn btn-warning glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modalEdicion" onclick="agregaform('<?php echo json_encode($mascota); ?>')">

                </button>
            </td>

Esta es la funcion de javascript:

function agregaform(datos){

    var data = datos;

    //d=datos.split('||');

    $('#idMascota').val(data['idMascota']);
    $('#nombreu').val(data['Nombre_mascota']);
    $('#tipou').val(data['Tipo_mascota']);
    $('#razau').val(data['Raza_mascota']);
    $('#coloru').val(data['Color_mascot']);
}

La idea de enviar el arreglo de php a javascript es que quiero que al dar clic en el botón de editar me muestre en el formulario los datos que están actualmente. Esta es la tabla: introducir la descripción de la imagen aquí

Al dar clic en el botón se muestra este formulario (que es donde quiero meter los elementos del arreglo para que se llene con la info que ya esta en la tabla) introducir la descripción de la imagen aquí

Creo que donde estoy fallando es al agregar los datos al formulario con javascript porque ya obtengo los datos como en la siguiente foto pero no me sale nada en el formulario introducir la descripción de la imagen aquí

7
  • pregunta como pasas los datos del php al javascript???
    – user46896
    el 23 feb. 2018 a las 3:16
  • 1
    te recomendaría pasarte a ajax para hacer lo que quieres... ya que el ajax puede tener 3 partes: envio de datos al php, respuesta de error al intentar enviarla informacion, respuesta de correcto si todo funciona bien, en la respuesta de tu ajax puedes entonces pasar los datos a esos inputs...
    – user46896
    el 23 feb. 2018 a las 3:18
  • ejemplo de php + jquery + json: cybmeta.com/ajax-con-json-y-php-ejemplo-paso-a-paso
    – user46896
    el 23 feb. 2018 a las 3:19
  • si, quiero pasar los datos del php al javascript. Y si lo habia pensado, pero no manejo bien jquery y en si solo me falta el paso de recibir el array del php en javascript, que tengo entendido que con echo json_encode($row) puedo recibirla en javascript pero no se porque no funciona. el 23 feb. 2018 a las 3:26
  • De hecho por eso estan estas dos lineas $row2 = $statement->fetch(PDO::FETCH_ASSOC); y echo json_encode($row_json); para ver que me devolvía pero me regresa null, creo que es porque el fetch manda el array asi [idMascota] => 1 [Nombre_mascota] => Zeus (SIN COMA) y en todos los ejemplos que he visto simpre el arrelo lleva la coma el 23 feb. 2018 a las 3:29

3 respuestas 3

0

Viendo el problema que tienes, al hacer la impresión de la tabla que muestra las mascotas, sobre el td que contiene el botón al que das click para lanzar el popup, colocas el id de la mascota, de tal forma que quede

<td id="56"><button> Editar</button></td>

dentro del javascript haces la impresión de tus datos con, echo json_encode($arreglo_mascotas);

el cual debe de verse de la siguiente manera

var mascotas = [{"id":"56", "nombre":"Katy", .....}];

En el evento de click de tu botón editar, obtienes el id del td quien es padre de tu botón

var id = $(this).parent().attr('id');
// hacer busqueda sobre tus mascotas
$.each(mascotas, function(key, mascota){
if(mascota.id == id){
    $('#idMascota').val(mascota['idMascota']);
    $('#nombreu').val(mascota['Nombre_mascota']);
    $('#tipou').val(mascota['Tipo_mascota']);
    $('#razau').val(mascota['Raza_mascota']);
    $('#coloru').val(mascota['Color_mascot']);
}

});

El ejemplo de ajax es muy sencillo añade esta linea en tu html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

puedes añadirlo en la cabecera head o dentro de body solo que hasta el final, con esto incluyes el código de jquery, y añades el siguiente script para ejecutar la llamda ajax

<script>
$(document).ready(function () {
    // Puedes colocarlo dentro de un evento, como dar click a un botón
    $.ajax({
        url:'http://pagina/para/obtener/datos.php',
        success:function(res){
            // aqui colocarias los datos sobre los campos que necesitas
            // caso en el que la respuesta sea solo un objeto
            $('#idMascota').val(res['idMascota']);
            $('#nombreu').val(res['Nombre_mascota']);
            $('#tipou').val(res['Tipo_mascota']);
            $('#razau').val(res['Raza_mascota']);
            $('#coloru').val(res['Color_mascot']);

            // esto es en caso que la respuesta sea un arreglo
            $.each(res, function(key, object){
                $('#idMascota').val(object['idMascota']);
                $('#nombreu').val(object['Nombre_mascota']);
                $('#tipou').val(object['Tipo_mascota']);
                $('#razau').val(object['Raza_mascota']);
                $('#coloru').val(object['Color_mascot']);
            });
        },
        error:function(err){
            alert("Ha ocurrido un error");
        }
    });
});
</script>
3
  • De hecho ya había logrado que saliera de esta forma (me base en un tutorial de youtube), pero el problema fue que yo queria agregar fotos y lo intente pero soy nuevo y no manejo ajax, así que mejor utilice lo que sabia (PHP) y así pude subir la foto y mostrarla en la tabla, lo único que me falta es hacer que al dar clic en el botón de editar se muestren los datos que ya están en la tabla el 23 feb. 2018 a las 5:23
  • Para el problema que estas especificando, no es necesario ajax. Para agregar fotos generas un objeto img,y le agregas la propiedad src, luego la colocas con jQuery en la parte que quieras, con jquery creo que es var img = $("<img>"); img.attr('src', 'liga/de/mi/imagen') el 23 feb. 2018 a las 5:23
  • Esta es la mejor manera de hacer... Entre las buenas prácticas esta el mantener la responsabilidad del código y cada función o clase....
    – user46896
    el 23 feb. 2018 a las 13:27
0

Lo que deberias hacer es añadir el numero de la columna de cada resultado de tu base de datos.

$statement = $conexion->prepare('SELECT idResidente, idMascota, Nombre_mascota, Tipo_mascota, Raza_mascota, Color_mascot, Foto_mascota, Residente_idResidente FROM mascota WHERE  Residente_idResidente = :idResidente ');
$statement->execute(array(':idResidente' => $idResidente));
$row2 = $statement->fetch(PDO::FETCH_ASSOC);
echo "window.JSON = ".json_encode($row2);
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    ?>
<tr>
    <td><?php echo $row['Nombre_mascota'] ?></td>
    <td><?php echo $row['Tipo_mascota'] ?></td>
    <td><?php echo $row['Raza_mascota'] ?></td>
    <td><?php echo $row['Color_mascot'] ?></td>
    <td><img height="70px" src="<?php echo $row['Foto_mascota']); ?>"/></td>
    <td>
        <button class="btn btn-warning glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modalEdicion" onclick="agregaform(window.JSON[<?php echo $row["idResidente"]; ?>])"> // $idResidente debe ser un numero (0, 1, 2, 3, ...) dependiendo el numero de la columna de tu base de datos y deberia imprimir algo asi window.JSON[0]

            </button>
        </td>

        <script>
            function agregaform(data){
                $('#idMascota').val(data['idMascota']);
                $('#nombreu').val(data['Nombre_mascota']);
                $('#tipou').val(data['Tipo_mascota']);
                $('#razau').val(data['Raza_mascota']);
                $('#coloru').val(data['Color_mascot']);
            }
        </script>

Espero averte ayudado

2
  • pero esto me agregaría los datos del array al formulario?? Disculpa, soy nuevo en esto y metí el código pero no hizo nada. Quizá deba explicar más. el 23 feb. 2018 a las 4:52
  • He editado mi respuesta @AntonioMendez espero dar en el clavo xd el 23 feb. 2018 a las 17:28
0

Termine por utilizar la siguiente función, donde especifico el nombre del formulario y el input. Ya lo había resuelto pero olvide comentar, gracias a los que me contestaron.

function agregaform(datos){

d=datos.split('||');

    document.update.idMascota.value = d[0];
    document.update.nombreu.value = d[1];
    document.update.tipou.value = d[2];
    document.update.razau.value = d[3];
    document.update.coloru.value = d[4];
}
1
  • Acá estás agregando información que debería ser parte de la pregunta... Esto no es una respuesta a tu pregunta (y el sitio no es un foro, sino que sigue el formato de preguntas -arriba- y respuestas -abajo)... ¿Podrías eliminarlo de acá y editar tu pregunta con la información que creas relevante? Gracias
    – Mariano
    el 23 feb. 2018 a las 5:09

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.