0

estoy teniendo el siguiente inconveniente.

Estoy armando un panel para la pagina web donde puedo cargar productos nuevos, eliminar productos y editar los valores del producto. El panel funciona con ajax y php. El problema que tengo es con la sección para editar productos.

Necesito que el editor(individual por cada producto) se abra en un modal con todos los valores del producto de tal forma que pueda editar manualmente segun necesidad. La parte de abrirlo en un modal ya esta resuelto.

Al presionar el boton editar, se abre el modal, y los input se rellenan con los valores del producto a editar, almacenados en la bd, pero hay input que quedan vacios. Los valores llegan sin ningun problema, pero el input no los muestra. Aqui les comparto los codigos:

Tabla de Productos:

<table class="table table-bordered table-striped">
  <tr>
   <th>Seleccionar</th>
   <th>Código de Producto</th>
   <th>Imágen</th>
   <th>Nombre de Producto</th>
   <th>Categoría</th>
   <th>Destacado</th>
   <th>Activo</th>
   <th>Editar</th>
   <th>Borrar</th>
  </tr>
  <tr>
   <td>
    <form action="" method="post">
      <input type="checkbox" name="records[]" value="'.$row["image_id"].'">
    </form>
   </td>
   <td>'.$row["codigo"].'</td>
   <td><img src="images/productos/'.$row["image_name"].'" class="img-thumbnail" width="100" height="100" /></td>
   <td>'.$row["nombre_producto"].'</td>
   <td>'.$row["category"].'</td>
   <td>'.$row["destacado"].'</td>
   <td>'.$row["activo"].'</td>
   <td><button type="button" class="btn btn-warning btn-xs edit" id="'.$row["image_id"].'">Editar</button></td>
   <td><button type="button" class="btn btn-danger btn-xs delete" id="'.$row["image_id"].'" data-image_name="'.$row["image_name"].'">Borrar</button></td>
  </tr>
</table>

Modal que aparece cuando presionamos "Editar" en cualquier producto de la tabla:

    <!-- inicio modal -->
    <div class="modal fade" id="imageModal" role="dialog">
     <div class="modal-dialog">
      <div class="modal-content">
       <form method="POST" id="edit_image_form">
            <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                   <h4 class="modal-title">Editar Detalles de Producto</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                   <label>ID</label>
                   <input type="text" name="image_id" id="image_id" class="form-control"/>
                   <label>Nombre de Imágen</label>
                   <input type="text" name="image_name" id="image_name" class="form-control"/>
                   <label>Descripción</label>
                   <input type="text" name="image_description" id="image_description" class="form-control"/>
                   <label>Nombre de Producto</label>
                   <input type="text" name="product_name" id="product_name" class="form-control"/>
                   <label>Categoría</label>
                   <input type="text" name="category" id="category" class="form-control"/>
                   <label>Código de Producto</label>
                   <input type="text" name="product_code" id="product_code" class="form-control"/>
                   <label>Diametro</label>
                   <input type="text" name="diametro" id="diametro" class="form-control"/>
                   <label>Peso</label>
                   <input type="text" name="peso" id="peso" class="form-control"/>
                   <label>Tipo</label>
                   <input type="text" name="tipo" id="tipo" class="form-control"/>
                   <label>Comensales</label>
                   <input type="text" name="comensales" id="comensales" class="form-control"/>
                   <label>Capacidad</label>
                   <input type="text" name="capacidad" id="capacidad" class="form-control"/>
                   <label>Recubrimiento Exterior</label>
                   <input type="text" name="recub_ext" id="recub_ext" class="form-control"/>
                   <label>Recubrimiento Interior</label>
                   <input type="text" name="recub_int" id="recub_int" class="form-control"/>
                   <label>Origen</label>
                   <input type="text" name="origen" id="origen" class="form-control"/>
                </div>
            </div>
            <div class="modal-footer">
                 <input type="hidden" name="image_id" id="image_id" value="" />
                 <input type="submit" name="submit" class="btn btn-info" value="Editar" />
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
       </form>
      </div>
     </div>
    </div> 
    <!-- fin modal -->

Codigo Ajax que rellena los input del modal:

<!-- editar producto: leer valores -->
     $(document).on('click', '.edit', function(){
      var image_id = $(this).attr("id");
      $.ajax({
       url:"edit.php",
       method:"post",
       data:{image_id:image_id},
       dataType:"json",
       success:function(data)
       {
        
        $('#imageModal').modal('show');

        $('#image_id').val(image_id);  //ok
        $('#image_name').val(data.image_name);  //ok
        $('#image_description').val(data.image_description);  //ok
        $('#category').val(data.category);  //ok
        $('#tipo').val(data.tipo);  //ok
        $('#capacidad').val(data.capacidad);  //ok
        $('#recub_ext').val(data.recub_ext);  //ok
        $('#recub_int').val(data.recub_int);  //ok
        $('#origen').val(data.origen);  //ok
        
        
        alert(data.product_name);  //value ok-debug
        alert(data.product_code);  //value ok-debug
        alert(data.peso);  //value ok-debug
        alert(data.comensales);  //value ok-debug
        

        <!-- no funciona-->
        $('#product_name').val(data.product_name);
        $('#product_code').val(data.product_code);
        $('#peso').val(data.peso);
        $('#diametro').val(data.diametro);
        $('#comensales').val(data.comensales);
        <!-- no funciona-->
       }
      });
     });

Codigo edit.php para la funcion ajax:

<?php
include('database_connection.php');

$query = "
SELECT * FROM tbl_image 
WHERE image_id = '".$_POST["image_id"]."'
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();

foreach($result as $row)
{
 $output['image_name'] = $row["image_name"];
 $output['image_description'] = $row["image_description"];
 $output['product_name'] = $row["nombre_producto"];
 $output['category'] = $row["category"];
 $output['product_code'] = $row["codigo"];
 $output['tipo'] = $row["tipo"];
 $output['diametro'] = $row["diametro"];
 $output['comensales'] = $row["comensales"];
 $output['capacidad'] = $row["capacidad"];
 $output['peso'] = $row["peso"];
 $output['recub_ext'] = $row["recub_ext"];
 $output['recub_int'] = $row["recub_int"];
 $output['origen'] = $row["origen"];
 
}


echo json_encode($output);

?>

Y por ultimo una imagen para que puedan comprender como se ve:

error input

Ojala puedan ayudarme porque realmente no encuentro el error. Muchas Gracias a todos!

Saludos.

3 respuestas 3

0

Verifica con cuidado los nombres de las variables, generalmente ese es el problema que me ocurre. Le eché un vistazo y parecen correctos, pero faltaría verificar si el nombre de la base de datos es exactamente el que usas en row[].

Para hacer un mejor seguimiento, podrías agregar esta línea: error_log(print_r($row,true)); entonces en el log de errores de php te aparece el registro, y puedes verificar los nombres de los campos.

1
  • La parte de php ya esta verificada y las variables pasan perfectamente hasta la funcion ajax
    – juanpb12
    Commented el 5 ago. 2021 a las 22:22
0

La solucion fue asignar valor a los imputs de esta forma:

imageModal = $('#imageModal'); imageModal.find('input[name="product_code"]').val(data.product_code);
imageModal.find('input[name="peso"]').val(data.peso);
...
...
0

Para debug, puedes probar asignando alguno de los valores que no van a los inputs (data.product_name, data.product_code, etc) en otro input donde sí llega la información, por ejemplo:

$('#origen').val(data.product_code); 

Así determinas si es algo raro con el input o no.

También puedes hacer un console.dir(data) y ver en la Consola del Navegador para saber que datos que te están llegando, me parece más útil que alert(); para debug.

----EDIT----

Al revisar tu solución, encontré qué es lo que ocurría. En el DOM ya existían los elementos con los ID que buscas, los cuales están en la página principal que abre el MODAL. Por eso tu solución funciona o podías poner algo tipo:

$('#imageModal #product_name').val(data.product_name);

O sea, incluir el #imageModal dentro del $('') para hacer más especifica la búsqueda del elemento.

3
  • Estimado, haciendo la prueba que me indica, de cambiando el valor del input origen y dandole el valor de product_doce, puedo ver perfectamente el valor... lo cual me lleva a pensar que es un problema con los input :( pero no se cual
    – juanpb12
    Commented el 5 ago. 2021 a las 22:08
  • Te recomendaría hacer la prueba de setear el resultado usando una clase ejemplo: <input class="product-name"> y en Jquery inserta la informacion usando $('.product-name').val(); si esto funciona, entonces quiere decir que en alguna parte de tu código existe alguna etiqueta que tiene el ID product_name. Commented el 6 ago. 2021 a las 13:09
  • @juanpb12 ¡me alegro que ya solucionaste tu problema! Ahora entiendo cual es el error - a partir de ver tu solución -. En el DOM ya existían los elementos con los ID que buscas, los cuales están en la página principal que abre el MODAL. Por eso tu solución funciona o podías poner algo tipo: $('#imageModal #product_name').val(data.product_name); O sea, incluir el #imageModal dentro del $(´´) para hacer más especifica la búsqueda del elemento. Saludos!
    – aiglesiasn
    Commented el 6 ago. 2021 a las 14:20

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.