编辑表单元素（下拉菜单和输入日期）未正确加载

时间：2018-09-03 02:35:44

标签： javascript php jquery json bootstrap-4

我仍然在同一个项目上挣扎，这次是使用通过8个文本字段，4个下拉菜单（其中2个是我在上一个{{3}上发布的相同动态下拉菜单）的编辑表单（通过模式打开） }）和一个标准输入类型日期，从网格中选择一条记录（这是一个简单的html表）后，必须从数据库中加载数据。

我不知道我是否错过了任何事情，或者我是否需要在代码中应用其他内容，所以请告诉我您的想法。

我将下面的代码发布下来进行审核：

表“ activofijo”（固定资产）

  • id_AF（id）
  • codigo_AF（用户插入的代码）
  • descripción_AF（描述）
  • id_prov（来自providers表的id）
  • id_td（文档类型表中的ID）
  • numeroDocumento_AF（文件编号）
  • fechaDocumento_AF（文档日期）
  • valorAdquisicion_AF（资产的购买价值）
  • vidaUtil_AF（资产的使用寿命）
  • valorActual_AF（资产的当前值）
  • vidaUtilMes_AF（资产的折旧年限，以月为单位）
  • id_grp（类别表中的ID）
  • id_sgrp（子类别表中的ID）

libAF.php 

    public function detailsAF($id_AF)
    {
        $query = $this->db->prepare("SELECT * FROM activofijo WHERE id_AF = :id_AF");
        $query->bindParam("id_AF", $id_AF, PDO::PARAM_STR);
        $query->execute();
        return json_encode($query->fetch(PDO::FETCH_ASSOC));
    }

detailsAF.php 

<?php
if (isset($_POST['id_AF']) && isset($_POST['id_AF']) != "") {
    require 'libAF.php';
    $id_AF = $_POST['id_AF'];

    $object = new CRUD();

    echo $object->detailsAF($id_AF);
}
?>

scptAF.js 

function getAFDetails(id_AF) {
loadUpdDropDowns();
// Add asset's ID to the hidden field
$("#hidden_AF_id").val(id_AF);
$.post("ajax/activoFijo/detailsAF.php", {
    id_AF: id_AF
},
    function (data, status) {
        // PARSE json data
        var activofijo = JSON.parse(data);
        // Assign existing values to the modal popup fields
        $("#upd_codigo_AF").val(activofijo.codigo_AF);
        $("#upd_descripcion_AF").val(activofijo.descripcion_AF);
        $("#upd_select_prov").val(activofijo.id_prov);
        $("#upd_select_td").val(activofijo.id_td);
        $("#upd_numeroDocumento_AF").val(activofijo.numeroDocumento_AF);
        $("#upd_fechaDocumento_AF").val(activofijo.fechaDocumento_AF);
        $("#upd_valorAdquisicion_AF").val(activofijo.valorAdquisicion_AF);
        $("#upd_vidaUtil_AF").val(activofijo.vidaUtil_AF);
        $("#upd_valorActual_AF").val(activofijo.valorActual_AF);
        $("#upd_vidaUtilMes_AF").val(activofijo.vidaUtilMes_AF);
        $("#upd_select_grp").val(activofijo.id_grp);
        $("#upd_select_sgrp").val(activofijo.id_sgrp);
    }
);
// Open modal popup
$("#update_AF_modal").modal("show");
}

//sync asset's original cost textfield with the salvage value hidden field to set a
//starting value for depreciation calculation

function syncValorAF()
{
var n1 = document.getElementById('valorAdquisicion_AF');
var n2 = document.getElementById('valorActual_AF');
n2.value = n1.value;
}

//sync asset's useful life textfield with the useful life in months hidden field to set a
//starting value for depreciation calculation

function syncVidaUtilAF()
{
var v1 = document.getElementById('vidaUtil_AF');
var v2 = document.getElementById('vidaUtilMes_AF');
v2.value = v1.value * 12;
}

activos.php 

<!-- Modal - Update details -->
    <div class="modal fade" id="update_AF_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Agregar nuevo activo</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="col-md-8">
                        <h5>Datos generales del activo</h5>                            
                    </div>
                    <div class="form-group">
                        <label for="upd_codigo_AF">Codigo del activo</label>
                        <input type="text" id="upd_codigo_AF" placeholder="Codigo del activo" class="form-control" required/>
                    </div>
                    <div class="form-group">
                        <label for="upd_descripcion_AF">Descripción</label>
                        <textarea id="upd_descripcion_AF" placeholder="Descripción" class="form-control" rows="3" cols="30" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="upd_select_prov">Proveedor</label>
                        <div class="upd_option_prov"></div>
                    </div>
                    <br>     
                    <div class="col-md-8">
                        <h5>Datos de adquisición</h5>
                    </div>                           
                    <div class="form-group">
                        <label for="upd_select_td">Tipo de documento</label>
                        <div class="upd_option_td"></div>
                    </div>                 
                    <div class="form-group">
                        <label for="upd_numeroDocumento_AF">N° de documento</label>
                        <input type="number" id="upd_numeroDocumento_AF" placeholder="N° de documento" class="form-control" required/>
                    </div>                       
                    <div class="form-group">
                        <label for="upd_fechaDocumento_AF">Fecha de documento</label>
                        <input type="date" id="upd_fechaDocumento_AF" placeholder="dd-mm-yyyy" class="form-control" required/>
                    </div>
                    <div class="form-group">
                        <label for="upd_valorAdquisicion_AF">Valor del activo</label>
                        <input type="number" id="upd_valorAdquisicion_AF" placeholder="Valor del activo" class="form-control" onkeyup="syncValorAF()" required/>
                    </div>
                    <div class="form-group">
                        <label for="upd_vidaUtil_AF">Vida util</label>
                        <input type="number" id="upd_vidaUtil_AF" placeholder="Vida util" class="form-control" required/>
                    </div>
                    <div class="form-group">
                        <input type="number" id="upd_valorActual_AF" class="form-control" hidden readonly/>
                    </div>
                    <div class="form-group">
                        <input type="number" id="upd_vidaUtilMes_AF" class="form-control" hidden readonly/>
                    </div>
                    <br>
                    <div class="col-md-8">
                        <h5>Clasificación del activo</h5>
                    </div>                            
                    <div class="form-group">
                        <label for="upd_select_grp">Grupo</label>
                        <div class="upd_option_grp"></div>
                    </div>         
                    <div class="form-group">
                        <div class="upd_option_sgrp"></div>
                    </div>         
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="updateAF()">Agregar</button>
                    <input type="hidden" id="hidden_AF_id">
                </div>
            </div>
        </div>
    </div>
    <!-- // Modal -->

PS：如果语法不好，我会先道歉，顺便说一句，用于填充非依赖性下拉列表的代码与上一个问题相同，只是它们没有onchange函数。

修改

我忘记添加问题了，我遇到的问题是，当我打开模式进行编辑时，我无法将所选选项加载到各自的下拉菜单中，日期。我也忘记为网格添加响应文件，以检查用户如何查看数据以及其相应的js脚本。 我很抱歉。

readAF.php 

<?php

require 'libAF.php';
$data = "";

$object = new CRUD();

// Design initial table header
$data = '<table class="table table-bordered table-condensed table-striped">
                    <tr>
                        <td>Código del activo</td>
                        <td>Descripción</td>
                        <td>Nombre del proveedor</td>
                        <td>Tipo de documento</td>
                        <td>N° de documento</td>
                        <td>Fecha del documento</td>
                        <td>Valor de adquisición</td>
                        <td>Vida util</td>
                        <td>Valor actual</td>
                        <td>Grupo del activo</td>
                        <td>Sub-grupo del activo</td>
                        <td></td>
                    </tr>';


$activos = $object->readAF();

if (count($activos) > 0) {
foreach ($activos as $activo) {
    $fechaDocumento_AF = date_create($activo['fechaDocumento_AF']);
    $data .= '<tr>
        <td>' . $activo['codigo_AF'] . '</td>
        <td>' . $activo['descripcion_AF'] . '</td>
        <td>' . $activo['nombre_prov'] . '</td>
        <td>' . $activo['nombre_td'] . '</td>
        <td>' . $activo['numeroDocumento_AF'] . '</td>
        <td>' . date_format($fechaDocumento_AF, 'd-m-Y') . '</td>
        <td>' . $activo['valorAdquisicion_AF'] . '</td>
        <td>' . $activo['vidaUtil_AF'] . '</td>
        <td>' . $activo['valorActual_AF'] . '</td>
        <td>' . $activo['nombre_grp'] . '</td>
        <td>' . $activo['nombre_sgrp'] . '</td>
        <td>
            <div class="btn-group">
                <button onclick="getAFDetails(' . $activo['id_AF'] . ')" class="btn btn-warning">Editar</button>
                <button onclick="deleteAF(' . $activo['id_AF'] . ')" class="btn btn-danger">Eliminar</button>
            </div>
        </td>
    </tr>';
}
} else {
// records not found
$data .= '<tr><td colspan="6">No hay datos disponibles</td></tr>';
}

$data .= '</table>';

echo $data;

?>

scptAF.php 

// READ records
function readRecords() {
$.get("ajax/activoFijo/readAF.php", {
}, function (data, status) {
    $(".records_content").html(data);
});
}

1 个答案:

答案 0 :(得分：0)

我设法自己（再次）解决了该问题，尽管有点问题，但可以正常使用。无论如何，我会将代码上传到此处进行审核，请分享您的反馈意见。

libAF.php 

    public function detailsAF($id_AF)
    {
        $query = $this->db->prepare("SELECT * FROM activofijo WHERE id_AF = :id_AF");
        $query->bindParam("id_AF", $id_AF, PDO::PARAM_STR);
        $query->execute();
        return json_encode($query->fetch(PDO::FETCH_ASSOC));
    }

       public function readAF()
    {
        $query = $this->db->prepare("SELECT activofijo.id_AF, activofijo.codigo_AF, activofijo.descripcion_AF, proveedores.nombre_prov, tipodocumento.nombre_td, activofijo.numeroDocumento_AF, activofijo.fechaDocumento_AF, activofijo.valorAdquisicion_AF, activofijo.vidaUtil_AF, activofijo.valorActual_AF, grupo.nombre_grp, subgrupo.nombre_sgrp, activofijo.estado_AF FROM activofijo INNER JOIN proveedores ON activofijo.id_prov = proveedores.id_prov INNER JOIN tipodocumento ON activofijo.id_td = tipodocumento.id_td INNER JOIN grupo ON activofijo.id_grp = grupo.id_grp INNER JOIN subgrupo ON activofijo.id_sgrp = subgrupo.id_sgrp");
        $query->execute();
        $data = array();
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $data[] = $row;
        }
        return $data;
    }

detailsAF.php 

<?php
if (isset($_POST['id_AF']) && isset($_POST['id_AF']) != "") {
    require 'libAF.php';
    $id_AF = $_POST['id_AF']; 
    $object = new CRUD();
    echo $object->detailsAF($id_AF);
}
?>

readAF.php 

<?php
require 'libAF.php';
$data = "";
$object = new CRUD();
// Design initial table header
$data = '<table class="table table-bordered table-condensed table-striped">
                        <tr>
                            <td>Código del activo</td>
                            <td>Descripción</td>
                            <td>Nombre del proveedor</td>
                            <td>Tipo de documento</td>
                            <td>N° de documento</td>
                            <td>Fecha del documento</td>
                            <td>Valor de adquisición</td>
                            <td>Vida util</td>
                            <td>Valor actual</td>
                            <td>Grupo del activo</td>
                            <td>Sub-grupo del activo</td>
                            <td>Estado</td>
                            <td></td>
                        </tr>';
$activos = $object->readAF();
if (count($activos) > 0) {
    foreach ($activos as $activo) {
        $fechaDocumento_AF = date_create($activo['fechaDocumento_AF']);
        $data .= '<tr>
            <td>' . $activo['codigo_AF'] . '</td>
            <td>' . $activo['descripcion_AF'] . '</td>
            <td>' . $activo['nombre_prov'] . '</td>
            <td>' . $activo['nombre_td'] . '</td>
            <td>' . $activo['numeroDocumento_AF'] . '</td>
            <td>' . date_format($fechaDocumento_AF, 'd-m-Y') . '</td>
            <td>' . $activo['valorAdquisicion_AF'] . '</td>
            <td>' . $activo['vidaUtil_AF'] . '</td>
            <td>' . $activo['valorActual_AF'] . '</td>
            <td>' . $activo['nombre_grp'] . '</td>
            <td>' . $activo['nombre_sgrp'] . '</td>
            <td>' . $activo['estado_AF'] . '</td>
            <td>
                <div class="btn-group">
                    <button onclick="getAFDetails(' . $activo['id_AF'] . ')" class="btn btn-warning">Editar</button>
                    <button onclick="deleteAF(' . $activo['id_AF'] . ')" class="btn btn-danger">Eliminar</button>
                </div>
            </td>
        </tr>';
    }
} else {
// records not found
    $data .= '<tr><td colspan="6">No hay datos disponibles</td></tr>';
}
$data .= '</table>';
echo $data;
?>

scriptAF.js 

// Dynamic dropdown samples
function populateUpdSelGrp(callback){
$.ajax({
    url: "ajax/activoFijo/populateSelGrp.php",
    method: "GET",
    success: function(grupos){
        //load options to dropdown list
        grupos = JSON.parse(grupos);
        $("#upd_select_grp").empty();
        $("#upd_select_grp").append('<option value="" disabled>Escoja grupo</option>');
        grupos.forEach(function(grupo){
            $("#upd_select_grp").append('<option value="'+grupo.id_grp+'">'+grupo.nombre_grp+'</option>');
            callback();
        })
    }
})
}
function populateUpdSelSgrp(callback){
$("#upd_select_grp").change(function(){
    var id_grp = $("#upd_select_grp").val();
    $.ajax({
        url: "ajax/activoFijo/populateSelSgrp.php",
        method: "POST",
        data: "id_grp=" + id_grp,
        success: function(subgrupos){
            //load options to dropdown list
            subgrupos = JSON.parse(subgrupos);
            $("#upd_select_sgrp").empty();
            $("#upd_select_sgrp").append('<option value="" disabled>Escoja sub-grupo</option>');
            subgrupos.forEach(function(subgrupo){
                $("#upd_select_sgrp").append('<option value="'+subgrupo.id_sgrp+'">'+subgrupo.nombre_sgrp+'</option>');
                callback();
            })
        }
    })
})
// !Dynamic dropdown samples
}
function getAFDetails(id_AF) {
// Add asset's ID to the hidden field
$("#hidden_id_AF").val(id_AF);
$.ajax({
    url: "ajax/activoFijo/detailsAF.php",
    method: "POST",
    data: "id_AF="+id_AF,
    success:function(data, status){
        console.log(data);
        // PARSE json data
        var activofijo = JSON.parse(data);
        // Assign existing values to the modal popup fields
        $("#upd_codigo_AF").val(activofijo.codigo_AF);
        $("#upd_descripcion_AF").val(activofijo.descripcion_AF);
        populateUpdSelProv(function(){
            $("#upd_select_prov").val(activofijo.id_prov);
        });
        populateUpdSelTD(function(){
            $("#upd_select_td").val(activofijo.id_td);
        });
        $("#upd_numeroDocumento_AF").val(activofijo.numeroDocumento_AF);
        $("#upd_fechaDocumento_AF").val(activofijo.fechaDocumento_AF);
        $("#upd_valorAdquisicion_AF").val(activofijo.valorAdquisicion_AF);
        $("#upd_vidaUtil_AF").val(activofijo.vidaUtil_AF);
        $("#upd_valorActual_AF").val(activofijo.valorActual_AF);
        populateUpdSelGrp(function(){
            $("#upd_select_grp").val(activofijo.id_grp);
            $("#upd_select_grp").trigger("change");
        });
        populateUpdSelSgrp(function(){
            $("#upd_select_sgrp").val(activofijo.id_sgrp);
        });
        $("#upd_estado_AF").val(activofijo.estado_AF);
    }
})
// Open modal popup
$("#update_AF_modal").modal("show");
}

activos.php 

<div class="modal fade" id="update_AF_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Actualizar activo</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-top-center">
                        <div class="col-md-8">
                            <h5>Datos generales del activo</h5>                            
                        </div>
                        <div class="form-group">
                            <label for="upd_codigo_AF">Codigo del activo</label>
                            <input type="text" id="upd_codigo_AF" placeholder="Codigo del activo" class="form-control" required/>
                        </div>
                        <div class="form-group">
                            <label for="upd_descripcion_AF">Descripción</label>
                            <textarea id="upd_descripcion_AF" placeholder="Descripción" class="form-control" rows="3" cols="30" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="upd_select_prov">Proveedor</label>
                            <select name="upd_select_prov" class="form-control" id="upd_select_prov">
                            </select>
                        </div>
                    </div>
                    <br>
                    <div class="form-left-col">
                        <div class="col-md-8">
                            <h5>Datos de adquisición</h5>
                        </div>
                        <div class="form-group">
                            <label for="upd_select_td">Tipo de documento</label>
                            <select name="upd_select_td" class="form-control" id="upd_select_td">
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="upd_numeroDocumento_AF">N° de documento</label>
                            <input type="number" id="upd_numeroDocumento_AF" placeholder="N° de documento" class="form-control" required/>
                        </div>
                        <div class="form-group">
                            <label for="upd_fechaDocumento_AF">Fecha de documento</label>
                            <input type="date" id="upd_fechaDocumento_AF" class="form-control" required/>
                        </div>
                        <div class="form-group">
                            <label for="upd_valorAdquisicion_AF">Valor del activo</label>
                            <input type="number" id="upd_valorAdquisicion_AF" placeholder="Valor del activo" class="form-control" onkeyup="syncUpdValorAF()" required/>
                        </div>
                        <div class="form-group">
                            <label for="upd_vidaUtil_AF">Vida util</label>
                            <input type="number" id="upd_vidaUtil_AF" placeholder="Vida util" class="form-control"  required/>
                        </div>
                        <div class="form-group">
                            <input type="number" id="upd_valorActual_AF" class="form-control" hidden readonly/>
                        </div>
                        <div class="form-group">
                            <input type="number" id="upd_vidaUtilMes_AF" class="form-control" hidden readonly/>
                        </div>
                    </div>
                    <div class="form-right-col">
                        <div class="col-md-8">
                            <h5>Clasificación del activo</h5>
                        </div>
                        <div class="form-group">
                            <label for="upd_select_grp">Grupo</label>
                            <select name="upd_select_grp" class="form-control" id="upd_select_grp">
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="upd_select_sgrp">Sub-grupo</label>
                            <select name="upd_select_sgrp" class="form-control" id="upd_select_sgrp">
                            </select>
                        </div>
                        <br>
                        <div class="col-md-8">
                            <h5>Estado del activo</h5>
                        </div>
                        <div class="form-group">
                            <label for="upd_estado_AF">Estado</label>
                            <select name="upd_estado_AF" class="form-control" id="upd_estado_AF">
                                <option value="Entregado">Entregado</option>
                                <option value="Disponible">Disponible</option>
                                <option value="Baja">Baja</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" onclick="updateAFDetails()">Actualizar</button>
                    </div>
                    <input type="hidden" id="hidden_id_AF">
                </div>
            </div>
        </div>
    </div>
相关问题
最新问题