0

Perdón si este tema está duplicado, pero no encuentro lo que necesito.

Lo primero mencionar que estoy creando una aplicación CRUD, ya tengo las altas de todos los registros de la base de datos. Ahora me encuentro intentando realizar la edición de los datos por medio de un modal pero no consigo cargar los datos correctos para poder proseguir...

Lo primero comentar, que todo lo estoy haciendo sobre Ajax con Laravel. Lo primero que hago es mostrar el contenido de mi tabla de la base de datos así:

$(document).ready(function(){
    var arriba = $("#top");


    // cuando hagamos scroll llamamos a la funcion
    window.onscroll = function(){scrollFunction()};


    // evento scroll
    function scrollFunction(){
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){
            arriba.removeClass("top");
            arriba.addClass("visible");
        }else{
            arriba.removeClass("visible");
            arriba.addClass("top");
        }
    }

    //script smooth scroll
    $("a").on('click', function(event){
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();

            // Store hash
            var hash = this.hash;

            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 800, function(){
               // Add hash (#) to URL when done scrolling (default click behavior)
             window.location.hash = hash;
            });
        } // End if
    });  
    //fin smoothscroll

    /* FUNCION PARA EL MENU MOVIL */
    var boton = $("#boton");
    var menuMovil = $("#menu-movil");
    var cerrar = $("#cerrar");

    boton.on('click', function(event){
        menuMovil.removeClass("contenedorMenu");
        menuMovil.addClass("visible");
    });

    cerrar.on('click', function(event){
        menuMovil.removeClass("visible");
        menuMovil.addClass("no-visible");
        menuMovil.removeClass("no-visible");
        menuMovil.addClass("contenedorMenu");
    });

    // validación formulario login

    var botonLogin = $("#login");
    var usuario = $("#usuario");
    var contrasenna = $("#contraseña");
    var formulario = $("#formulario-login");

    botonLogin.on('click', function(event){
        if(usuario.val() === "" || contrasenna.val() === ""){
            alert("Usuario o contraseña vacios");

            usuario.addClass("error-vacio");
            contrasenna.addClass("error-vacio");
        }else{
            formulario.submit();
        }
    });


    //funciones para listado
    function listadoInstalaciones(){
        var formularioInstalacion = $("#formulario").serialize();
        $.ajax({
            url: "/listadoInstalaciones",
            data: formularioInstalacion,
            type: "GET",
            headers: {'X-CSRF-Token': '{{csrf_token()}}'},
            success:function(data){
                //Convertimos la respuesta en JSON
                var datos = JSON.parse(data);

                for(var item of datos){
                    $('#listado').append(`
                        <tr id="tr-${item.id}">
                            <td>${item.id}</td>
                            <td>${item.nombre}</td>
                            <td>${item.capacidad}</td>
                            <td><button><i class='fas fa-trash-alt'></i></button></td>
                            <td><button onclick='editarInstalaciones(${item.id});'><i class='fas fa-external-link-alt'></i></button></td>
                        </tr>
                    `);
                }
            },
            error: function(){
                alert('imposible listar instalaciones');
            }
        });
    }

    //funcion para editar Por parámetro recibe ID de instalación a modificar
    function editarInstalaciones(itemId) {
        // Obtener la fila
        var fila = $("#tr-" + itemId);
        // Solo si la fila existe
        if(fila) {
            // Buscar datos en la fila y asignar a campos del formulario:
            // Primera columna (0) tiene ID, segunda (1) tiene nombre, tercera (2) capacidad
            $("#id-instalacion").value() = fila.find("td:eq(0)").text();
            $("#instalacion").value() = fila.find("td:eq(1)").text();
            $("#capacidad").value() = fila.find("td:eq(2)").text();
            // Mostrar modal
            $('#editarInstalaciones').modal('show');
        }
    }



    function listadoActividades(){
        var formularioActividad = $("#formularioActividad").serialize();
        $.ajax({
            url: "/listadoActividades",
            data: formularioActividad,
            type: "GET",
            headers: {'X-CSRF-Token': '{{csrf_token()}}'},
            success:function(data){
                //Convertimos la respuesta en JSON
                var datos = JSON.parse(data);

                for(let item of datos){
                    $('#listadoActividades').append("<tr>"+
                                                        "<td>"+item.id+"</td>" +
                                                        "<td>"+item.nombre+"</td>" +
                                                        "<td>"+item.precio+"</td>" +
                                                        "<td>"+item.apuntados+"</td>" +
                                                        "<td>"+item.instalacion+"</td>" +
                                                        "<td>"+item.fechaHora+"</td>" +
                                                        "<td>"+"<a href=''><i class='fas fa-trash-alt'></i></a>"+"</td>"+
                                                        "<td>"+"<a href=''><i class='fas fa-external-link-alt'></i></a>"+"</td>"+
                                                    "</tr>"                 
                                                    );
                }

            },
            error: function(){
                alert('imposible listar actividades');
            }
        });
    }

    function listadoUsuarios(){
        var formularioUsarios = $("#formularioUsuarios").serialize();
        $.ajax({
            url: "/listadoUsuarios",
            data: formularioUsarios,
            type: "GET",
            headers: {'X-CSRF-Token': '{{csrf_token()}}'},
            success:function(data){
                //Convertimos la respuesta en JSON
                var datos = JSON.parse(data);

                for(let item of datos){
                    $('#listadoUsuarios').append("<tr>"+
                                                        "<td>"+item.id+"</td>" +
                                                        "<td>"+item.name+"</td>" +
                                                        "<td>"+item.apellidos+"</td>" +
                                                        "<td>"+item.dni+"</td>" +
                                                        "<td>"+item.fechaNacimiento+"</td>" +
                                                        "<td>"+item.email+"</td>" +
                                                        "<td>"+item.direccion+"</td>" +
                                                        "<td>"+item.provincia+"</td>" +
                                                        "<td>"+item.telefono+"</td>" +
                                                        "<td>"+item.usertype+"</td>" +
                                                        "<td>"+"<a href=''><i class='fas fa-trash-alt'></i></a>"+"</td>"+
                                                        "<td>"+"<a href=''><i class='fas fa-external-link-alt'></i></a>"+"</td>"+
                                                    "</tr>"                 
                                                    );
                }

            },
            error: function(){
                alert('imposible listar usuarios');
            }
        });
    }


    function listadoMaquinas(){
        var formularioMaquinas = $("#formularioMaquinas").serialize();
        $.ajax({
            url: "/listadoMaquinas",
            data: formularioMaquinas,
            type: "GET",
            headers: {'X-CSRF-Token': '{{csrf_token()}}'},
            success:function(data){
                //Convertimos la respuesta en JSON
                var datos = JSON.parse(data);

                for(let item of datos){
                    $('#listadoMaquinas').append("<tr>"+
                                                        "<td>"+item.id+"</td>" +
                                                        "<td>"+item.nombreMaquina+"</td>" +
                                                        "<td>"+item.tipoMaquina+"</td>" +
                                                        "<td>"+item.dificultad+"</td>" +
                                                        "<td>"+item.pesoMaquina+"</td>" +
                                                        "<td>"+item.parteCuerpo+"</td>" +
                                                        "<td>"+item.instalacion+"</td>" +
                                                        "<td>"+"<a href=''><i class='fas fa-trash-alt'></i></a>"+"</td>"+
                                                        "<td>"+"<a href=''><i class='fas fa-external-link-alt'></i></a>"+"</td>"+
                                                    "</tr>"                 
                                                    );
                }

            },
            error: function(){
                alert('imposible listar máquinas');
            }
        });
    }

    //Función insertar
    function insertarInstalaciones(){
        event.preventDefault();

        var nombreValor = $('#nombre-instalacion').val();
        var capacidadValor = $('#capacidad-instalacion').val();
        var tokenValor = $('#token').val();

        // limpiamos la tabla
        $('#listado tr').remove();

        if(nombreValor === "" || capacidadValor === ""){
            $('#nombre').addClass("error-vacio");
            $('#capacidad').addClass("error-vacio");

        }else{                 

            //serelizamos el formulario
            var serializado = $("#formulario").serialize();

            // función Ajax
            $.ajax({
            url: "/crearInstalacion",
            data: serializado,
            type: "post",
            headers: {'X-CSRF-Token': '{{csrf_token()}}'},
                success:function(data){                     
                    listadoInstalaciones();
                },
                error: function(){
                    alert('imposible Crear');
                }
            });
        }
    }

    //funcionalidad botón agregarInstalacion
    var botonInstalacion = $('#agregarInstalacion');

    botonInstalacion.on('click', function(event){
        insertarInstalaciones();
    });

    //funcionalidad botón agregar Actividad

    var agregarActividad = $('#agregarActividad');
    agregarActividad.on('click', function(event){
        insertarActividades();
    });

    //funcionalidad botón agregar Usuario

    var agregarUsuario = $('#agregarUsuario');
    agregarUsuario.on('click', function(event){
        insertarUsuarios();
    });

    //funcionalidad botón agregar Maquinas

    var agregarMaquina = $('#agregarMaquina');
    agregarMaquina.on('click', function(event){
        agregarMaquinas();
    });

    //cuando cargue la web
    $(document).ready(listadoInstalaciones);
    $(document).ready(listadoActividades);
    $(document).ready(listadoUsuarios);
    $(document).ready(listadoMaquinas);
});

//}());

Pero siempre me muestra el último registro de la tabla. Y no sabría como cargar los datos dependiendo del registro que yo quiera editar.

Gracias de antemano y un saludo

7
  • ¿Cómo ejecutas listadoInstalaciones()? Lo único que se me ocurre es que la función no está en contexto global, sino dentro de otra función u objeto. Por cierto, elimina la función $(document=.on('click', '.editarInstalaciones'... no se usa.
    – Triby
    Commented el 16 abr. 2020 a las 18:25
  • de esta manera ejecuto todas las funciones para que cargue la información: //cuando cargue la web $(document).ready(listadoInstalaciones); $(document).ready(listadoActividades); $(document).ready(listadoUsuarios); $(document).ready(listadoMaquinas);
    – scorpions
    Commented el 16 abr. 2020 a las 18:29
  • Entonces, ¿la función editarInstalaciones no está dentro de un objeto u otra función?
    – Triby
    Commented el 16 abr. 2020 a las 18:34
  • No. Voy a actulizar mi pregunta con todo el código javascript
    – scorpions
    Commented el 16 abr. 2020 a las 18:36
  • Efectivamente, todo está dentro de una función anónima, porque al inicio tienes esto: (function(){. Coloca la función para editar arriba de eso y se debe solucionar el problema.
    – Triby
    Commented el 16 abr. 2020 a las 18:38

1 respuesta 1

0

Aunque es posible detectar la fila en que se encuentra cada botón, hay que agregar ID a cada fila de la tabla para poder acceder a sus elementos y agregar el evento onclick directamente en el botón.

Es preferible usar plantillas de cadena para crear un código más legible:

            for(var item of datos){
                $('#listado').append(`
                    <tr id="tr-${item.id}">
                        <td>${item.id}</td>
                        <td>${item.nombre}</td>
                        <td>${item.capacidad}</td>
                        <td><button><i class='fas fa-trash-alt'></i></button></td>
                        <td><button onclick="editarInstalaciones(${item.id});"><i class='fas fa-external-link-alt'></i></button></td>
                    </tr>
                `);
            }

En el formulario del modal hace falta un campo ID para saber lo que vas a editar; lo puse como oculto (hidden), porque no se va a modificar:

        <form action="{{ route('modalEditarInstalaciones') }}" method="get" class="formulario" id="formulario">
        {{ csrf_field() }}
            <div class="campos1">
                <input type="hidden" name="id-instalacion" id="id-instalacion" value="">
                <label for="nombre">Nombre
                <input type="text" name="nombre-instalacion" id="instalacion" value="">
            </div>
            <div class="campos2">
                <label for="capacidad">capacidad
                <input type="text" name="capacidad-instalacion" id="capacidad" value="">
            </div>
        </form>

Finalmente, la función Javascript que va a abrir el modal y colocar valores a los campos:

// Por parámetro recibe ID de instalación a modificar
function editarInstalaciones(itemId) {
    // Obtener la fila
    var fila = $("#tr-" + itemId);
    // Solo si la fila existe
    if(fila) {
        // Buscar datos en la fila y asignar a campos del formulario:
        // Primera columna (0) tiene ID, segunda (1) tiene nombre, tercera (2) capacidad
        $("#id-instalacion").val(fila.find("td:eq(0)").text());
        $("#instalacion").val(fila.find("td:eq(1)").text());
        $("#capacidad").val(fila.find("td:eq(2)").text());
        // Mostrar modal
        $('#editarInstalaciones').modal('show');
    }
}
5
  • Gracias por tu respuesta y la ayuda. Cuando ejecuto ese código. Me devuelve que editarInstalaciones no es una función. ncaught TypeError: editarInstalaciones is not a function at HTMLButtonElement.onclick (altaInstalaciones:1)
    – scorpions
    Commented el 16 abr. 2020 a las 17:45
  • ¿Dónde colocaste la función?, quedaría bien arriba o abajo de listadoInstalaciones.
    – Triby
    Commented el 16 abr. 2020 a las 17:48
  • justo ahí la estoy colocando. debajo de listadoInstalaciones
    – scorpions
    Commented el 16 abr. 2020 a las 17:57
  • Por favor edita tu pregunta y coloca el código actualizado, para poder ver lo que está pasando.
    – Triby
    Commented el 16 abr. 2020 a las 18:08
  • Gracias por la ayuda. Hecho
    – scorpions
    Commented el 16 abr. 2020 a las 18:11

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.