Skip to main content
5 de 5
etiquetas editadas
user avatar
user avatar

editar registro mysql laravel

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

scorpions
  • 455
  • 2
  • 10
  • 25