Элементы формы редактирования (выпадающий список и дата ввода) загружаются неправильно - PullRequest
Новая
       2

Элементы формы редактирования (выпадающий список и дата ввода) загружаются неправильно

0 голосов
/ 03 сентября 2018

Я все еще борюсь с тем же проектом, и на этот раз с формой редактирования (открытой через модал), которая использует 8 текстовых полей, 4 раскрывающихся списка (2 - это те же динамические раскрывающиеся списки, которые я опубликовал в своей предыдущей проблеме ) ) и одна стандартная дата типа ввода, когда данные должны быть загружены из базы данных после выбора записи в сетке (которая представляет собой простую HTML-таблицу) для редактирования.

Я не знаю, пропустил ли я что-нибудь или это было что-то еще, что я должен применить в коде, поэтому, пожалуйста, дайте мне знать ваши мысли.

Я выложу коды ниже для проверки:

Таблица «activofijo» (основные средства)

  • id_AF (id)
  • codigo_AF (введенный пользователем код)
  • descripción_AF (описание)
  • id_prov (идентификатор из таблицы провайдеров)
  • id_td (идентификатор из таблицы типов документов)
  • цифраDocumento_AF (номер документа)
  • fechaDocumento_AF (дата документа)
  • valorAdquisicion_AF (стоимость покупки актива)
  • vidaUtil_AF (срок полезного использования актива)
  • valorActual_AF (текущая стоимость актива)
  • vidaUtilMes_AF (срок полезного использования актива в месяцах для расчета амортизации)
  • id_grp (идентификатор из таблицы категорий)
  • id_sgrp (идентификатор из таблицы подкатегорий)

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 голосов
/ 21 сентября 2018

Мне удалось исправить проблему самому (снова), и, хотя он немного глючит, он работает, как и ожидалось. В любом случае, я выложу здесь код для ознакомления и поделитесь вашими отзывами.

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...