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