时间戳

首页 > 解决方案 > 使用 ajax 无法正确显示某些输入值

php - 使用 ajax 无法正确显示某些输入值

问题描述

我遇到以下问题。

我正在为网站设置一个面板，我可以在其中上传新产品、删除产品和编辑产品值。该面板适用于 ajax 和 php。我遇到的问题是编辑产品的部分。

我需要编辑器（每个产品的个人）以具有所有产品值的模式打开，以便我可以根据需要手动编辑。在模态中打开它的部分已经解决了。

当按下编辑按钮时，模式打开，输入中填充了要编辑的产品的值，存储在数据库中，但有些输入是空的。值到达没有任何问题，但输入没有显示它们。在这里和大家分享一下代码：

产品表：

  <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>

当我们在表格中的任何产品上按“编辑”时出现的模式：

    <!-- 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 -->

填充模态输入的 Ajax 代码：

<!-- 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-->
       }
      });
     });

ajax 函数的 Edit.php 代码：

<?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);

?>

这里有 php 查询结果（我的调试）：


print_r($row)

Array ( [image_id] => 1030 [0] => 1030 [image_name] => f4-2145269539.png [1] => f4-2145269539.png [image_description] => probando la descripcion [2] => probando la descripcion [category] => aqua [3] => aqua [codigo] => 387535555 [4] => 387535555 [nombre_producto] => Cacerola 20cm [5] => Cacerola 20cm [tipo] => cacerola [6] => cacerola [diametro] => 20 [7] => 20 [capacidad] => 2,5 [8] => 2,5 [comensales] => 3 [9] => 3 [recub_ext] => esmalte vitroporcelanizado [10] => esmalte vitroporcelanizado [recub_int] => antiadherente [11] => antiadherente [destacado] => 0 [12] => 0 [activo] => 0 [13] => 0 [medidas] => [14] => [origen] => nacional [15] => nacional [peso] => 4 [16] => 4 ) 


echo json_encode($output);

{"image_name":"f4-2145269539.png","image_description":"probando la descripcion","product_name":"Cacerola 20cm","category":"aqua","product_code":"387535555","tipo":"cacerola","diametro":"20","comensales":"3","capacidad":"2,5","peso":"4","recub_ext":"esmalte vitroporcelanizado","recub_int":"antiadherente","origen":"nacional"}

最后是一张图片，以便您了解它的外观： 在此处输入图像描述

我希望你能帮助我，因为我真的找不到错误。非常感谢大家！

我尝试这样做，并且效果很好。它在输入 id="origen" 上显示 product_code 值。

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

问候。

标签： phpjqueryajaxinputmodal-dialog

解决方案

推荐阅读