Tengo una tabla que me trae todos los registros de mi tabla complejo y un botón que abre un modal, el problema es que al seleccionar un registro de la tabla (En la vista) no me muestra como corresponde la información del registro escogido.
En el siguiente ejemplo reproduciré de manera similar el problema que tengo:
// Obtenemos el modal
var modal = document.getElementById('myModal');
// Obtenemos el elemento <span> que cierra el modal
var span = document.getElementsByClassName("close_v1")[0];
function Itsfunction(){
$('#myModal').fadeIn('fast');
}
function Myfunction(){
$('#myModal').fadeIn('fast');
}
span.onclick = function() {
$('#myModal').fadeOut("slow");
}
window.onclick = function(event) {
if(event.target == modal) {
$('#myModal').fadeOut("slow");
}
}
table{
font-family: 'Segoe UI';
}
.h2_modal{
color: white;
margin-left: -0.4mm;
background-color: #4E7B6D;
margin-top: -8.5mm;
width: 300px;
border-radius: 5px;
padding-left: 3mm;
font-family: 'Segoe UI';
}
.modal_v1{
font-family: 'Segoe UI';
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: -50px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}
.modal-content_v1{
position: relative;
background-color: #478573;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
z-index: 1;
border-radius: 10px;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.close_v1{
color: white;
float: right;
font-size: 28px;
font-weight: bold;
margin-top: -1mm;
}
.close_v1:hover,
.close_v1:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header_v1{
background-color: #478573;
color: white;
}
.modal-header_v1 h3{
margin-top: -3mm;
margin-left: 3mm;
}
.modal-body_v1{
background-color: white;
padding: 2px 16px;
}
.modal-footer_v1{
padding: 2px 16px;
background-color: #478573;
color: white;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
</head>
<table border="1" >
<tr>
<td>
<label>Cliente 1</label>
</td>
<td>Cliente 2</td>
</tr>
<tr>
<td>
<input type="button" id="btn-blank" value="Open Modal" onclick="Itsfunction()"/>
</td>
<td>
<input type="button" id"btn-blank2" value="Open Modal" onclick="Myfunction()"/>
</td>
<tr>
</table>
<div id="myModal" class="modal_v1">
<div class="modal-content_v1">
<h2 class="h2_modal">Detalle del Cliente</h2>
<div class="modal-header_v1">
<span class="close_v1">×</span>
<h3 style="color: white;">Pedro</h3>
</div>
<div class="modal-body_v1">
<label style="color: black;">ID: </label>
<label style="color: grey;">1</label>
<br>
<label style="color: black;">Nombre: </label>
<label style="color: grey;">Pedro Riquelme</label>
<br>
<label style="color: black;">Direccion: </label>
<label style="color: grey;">Av. Los dinosaurios</label>
<br>
<label style="color: black;">Comuna: </label>
<label style="color: grey;">Villa Dino</label>
<br>
<label style="color: black;">Telefono: </label>
<label style="color: grey;">+11111111111</label>
<br>
<label style="color: black;">Profesión: </label>
<label style="color: grey;">Abogado</label>
<br>
<label style="color: black;">Edad: </label>
<label style="color: grey;">25 Años</label>
<br>
</div>
<div class="modal-footer_v1">
<!--_PUT SOME TEXT HERE!_-->
<br>
</div>
</div>
</div>
<br><br>
De manera similar al ejemplo anterior tengo una tabla la cual me trae unos campos de una tabla de mi base de datos, un botón que con ayuda de unos @foreach()
más un @if()
se repite (el botón) según la cantidad de datos que tenga la tabla y a su vez éste me muestra los datos del registro escogido.
Para que el problema que tengo se entienda bien, lo explicaré de la siguiente manera: En una tabla que se llena con información desde la base de datos tengo, UN BOTÓN (que se repite solo ya que para mostrar todos los registros en una tabla tuve que poner todo dentro de un @foreach); en donde se deben mostrar los datos del registro seleccionado en un modal, por cada registro se debe mostrar su información respectiva. Pero, en cambio eso no sucede; me muestra solo el 1er registro de la tabla junto con sus datos, y al presionar en uno diferente me sigue mostrando el primer registro siempre.
Dejo el código que tengo:
<div class="table-responsive m-t-40" style="margin-top: -1mm;">
<table id="datatable" class="table table-bordered table-striped">
<thead>
<tr>
<th style="color: grey; text-align: center;">ID</th>
<th style="color: grey; text-align: left;">COMPLEJO</th>
<th style="color: grey; text-align: left;">DIRECCION</th>
<th style="color: grey; text-align: left;">COMUNA</th>
<th style="color: grey; text-align: left;">TELEFONO</th>
<th style="color: grey; text-align: left;">CLIENTE</th>
<th style="color: grey; padding-left: 6mm;">OPERACION</th>
</tr>
</thead>
<tbody>
@foreach($complejo as $complejos)
<tr>
<td style="text-align: center;">{{$complejos->id}}</td>
<td style="text-align: left;">{{$complejos->nombre}}</td>
<td style="text-align: left;">{{$complejos->direccion}}</td>
<td style="text-align: left;">{{$complejos->comuna}}</td>
<td style="text-align: left;">{{$complejos->telefono}}</td>
@foreach($cliente as $client)
@if($complejos->cliente_id == $client->id)
<td style="text-align: left;">{{$client->nombre_responsable}}</td>
@endif
@endforeach
<td class="text-nowrap" style="text-align: left;">
{!! Form::open(['route'=> ['complejos.destroy', $complejos->id], 'method'=>'DELETE']) !!}
<div id="btn-detalle">
<input type="button" data-toggle="tooltip" data-original-title="Detalle" id="btn-blank">
<center>
<i class="ti-eye" style="position: relative; top: -9mm; left: 0mm; color: white;"></i>
</center>
</div>
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
</table>
@foreach($complejo as $complex)
@foreach($cliente as $customer)
<div id="myModal" class="modal_v1">
<div class="modal-content_v1">
<h2 class="h2_modal">Detalle del Complejo</h2>
<div class="modal-header_v1">
<span class="close_v1">×</span>
<!--DE ESTA MANERA TRAIGO LOS DATOS ASI ME FUNCIONA-->
<h3 style="color: white;">{{$complex->nombre}}</h3>
</div>
@if($complex->cliente_id == $customer->id)
<div class="modal-body_v1">
<label style="color: black;">ID: </label>
<label style="color: grey;">{{$complex->id}}</label>
<br>
<label style="color: black;">Complejo: </label>
<label style="color: grey;">{{$complex->nombre}}</label>
<br>
<label style="color: black;">Direccion: </label>
<label style="color: grey;">{{$complex->direccion}}</label>
<br>
<label style="color: black;">Comuna: </label>
<label style="color: grey;">{{$complex->comuna}}</label>
<br>
<label style="color: black;">Telefono: </label>
<label style="color: grey;">{{$complex->telefono}}</label>
<br>
<label style="color: black;">Cliente: </label>
<label style="color: grey;">{{$customer->nombre_responsable}}</label>
<br>
<label style="color: black;">Descripción: </label>
<label style="color: grey; text-align: justify;">{{$complex->descripcion}}</label>
<br>
@endif
@endforeach
@endforeach
</div>
<div class="modal-footer_v1">
<!--_PUT SOME TEXT HERE!_-->
<br><br>
</div>
</div>
</div>
<br>
</div>
<script type="text/javascript">
// Obtenemos el modal
var modal = document.getElementById('myModal');
// Obtenemos el boton que abre el modal
var btn = document.getElementById("btn-blank");
// Obtenemos el elemento <span> que cierra el modal
var span = document.getElementsByClassName("close_v1")[0];
// Cuando el usuario hace clic en el <span> (x), el modal se cierra
span.onclick = function() {
$('#myModal').fadeOut("slow");
}
// Cuando el usuario hace clic en cualquier parte fuera del modal, éste se cierra.
window.onclick = function(event) {
if(event.target == modal) {
$('#myModal').fadeOut("slow");
}
}
// Cuando el usuario hace clic en el boton el modal se abre
$(document).ready(function(){
$(document).on('click', '.detalle', function(){
$('#myModal').fadeIn('fast');
});
});
</script>
Yo utilizo Laravel 5.6 con PHP y blade; ¿Que es lo que podría haber hecho mal?