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í:
//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>"+
"<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 data-toggle='modal' data-target='#editarInstalaciones''><i class='fas fa-external-link-alt'></i></button>"+"</td>"+
"</tr>"
);
}
},
error: function(){
alert('imposible listar instalaciones');
}
});
}
Comentar, que mi modal, no lo quiero a poder ser, en una plantilla blade a parte, lo quiero dentro de mi blade de cada función.
!-- Modal -->
<div class="modal fade" id="editarInstalaciones" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Editar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('modalEditarInstalaciones') }}" method="get" class="formulario" id="formulario">
{{ csrf_field() }}
<div class="campos1">
<label for="nombre">Nombre
<input type="text" name="nombre-instalacion" id="instalacion">
</div>
<div class="campos2">
<label for="capacidad">capacidad
<input type="text" name="capacidad-instalacion" id="capacidad">
<p id="idInstalacion"></p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar Cambios</button>
</div>
</div>
</div>
</div>
Con eso consigo mostrar mi modal, pero ahora necesito mostrar los datos de cada registro que quiera modificar. Para ello uno esto.
//funcion para editar
$(document).on('click', '.editarInstalaciones', function(){
$('#editarInstalaciones').modal('show');
//pasamos los datos al modal
$('#instalacion').text();
$('#instalacion').val(item.nombre);
$('#capacidad').text();
$('#capacidad').val(item.capacidad);
});
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