2

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">&times;</span>
    <h3 style="color: white;">Pedro</h3>
  </div>
  <div class="modal-body_v1">
    <label style="color: black;">ID:&nbsp;</label>
    <label style="color: grey;">1</label>
    <br>
    <label style="color: black;">Nombre:&nbsp;</label>
    <label style="color: grey;">Pedro Riquelme</label>
    <br>
    <label style="color: black;">Direccion:&nbsp;</label>
    <label style="color: grey;">Av. Los dinosaurios</label>
    <br>
    <label style="color: black;">Comuna:&nbsp;</label>
    <label style="color: grey;">Villa Dino</label>
    <br>
    <label style="color: black;">Telefono:&nbsp;</label>
    <label style="color: grey;">+11111111111</label>
    <br>
    <label style="color: black;">Profesión:&nbsp;</label>
    <label style="color: grey;">Abogado</label>
    <br>
    <label style="color: black;">Edad:&nbsp;</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">&times;</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:&nbsp;</label>
            <label style="color: grey;">{{$complex->id}}</label>
            <br>
            <label style="color: black;">Complejo:&nbsp;</label>
            <label style="color: grey;">{{$complex->nombre}}</label>
            <br>
            <label style="color: black;">Direccion:&nbsp;</label>
            <label style="color: grey;">{{$complex->direccion}}</label>
            <br>
            <label style="color: black;">Comuna:&nbsp;</label>
            <label style="color: grey;">{{$complex->comuna}}</label>
            <br>
            <label style="color: black;">Telefono:&nbsp;</label>
            <label style="color: grey;">{{$complex->telefono}}</label>
            <br>
            <label style="color: black;">Cliente:&nbsp;</label>
            <label style="color: grey;">{{$customer->nombre_responsable}}</label>
            <br>
            <label style="color: black;">Descripción:&nbsp;</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?

2
  • Si haces esto es más carga de trabajo para el navegador, esto se traduce en más tiempo de carga. ¿Por que no lo haces con Ajax y así solo creas un solo modal? Commented el 14 dic. 2018 a las 15:56
  • Lo único que se debe crear con forme a la cantidad de registros son los botones, en ellos debes guardar la información de cada cliente, y luego por medio de javascript cargar esa info al modal, es el mismo modal para todos los clientes, lo que varia es la info, que esta guardada en los botones. Ya mas abajo pusieron una respuesta usando el tributo data, el cual me parece es lo mas óptimo
    – SOSkr
    Commented el 18 dic. 2018 a las 13:43

2 respuestas 2

3

yo lo hago de la siguiente forma, en cada botón se colocar la información que corresponde en los registro

<button class="edit-modal btn btn-info" 
    data-id="28"
    data-alturamaxima="20" 
    data-created_at="2018-05-04 13:40:56" 
    data-dimension_tasacrecimiento="40" 
    data-updated_at="2018-05-04 18:40:56"
    >
    Editar
    </button> 

en la cual se ejecuta una función javascript que toma los datos que tiene el botón y me lo inserta a los input

$(document).on('click', '.edit-modal', function() {
    $("#id_mass").val($(this).data("id"));
    $("#created_at_mass").val($(this).data("created_at"));
    $("#dimension_tasacrecimiento_mass").val($(this).data("dimension_tasacrecimiento"));
    $("#updated_at_mass").val($(this).data("updated_at"));


});

codigo HTML

<br>ID
<input autofocus="" class="form-control" id="id_mass" required="required" type="text">
<br>Dimensión de crecimiento:
<input autofocus="" class="form-control" id="dimension_tasacrecimiento_mass" required="required" type="text">
<br>Created
<input autofocus="" class="form-control" id="created_at_mass" required="required" type="text">
<br>update
<input autofocus="" class="form-control" id="updated_at_mass" required="required" type="text">

$(document).on('click', '.edit-modal', function() {
		$("#id_mass").val($(this).data("id"));
		$("#created_at_mass").val($(this).data("created_at"));
		$("#dimension_tasacrecimiento_mass").val($(this).data("dimension_tasacrecimiento"));
		$("#updated_at_mass").val($(this).data("updated_at"));
		
		
	
	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<button class="edit-modal btn btn-info" 
data-id="28"
data-alturamaxima="20" 
data-created_at="2018-05-04 13:40:56" 
data-dimension_tasacrecimiento="40" 
data-updated_at="2018-05-04 18:40:56"
>
Editar
</button>

<button class="edit-modal btn btn-info" 
data-id="25"
data-alturamaxima="25" 
data-created_at="2018-07-08 16:20:36" 
data-dimension_tasacrecimiento="70" 
data-updated_at="2018-03-04 15:30:56"
>
Editar
</button>



  
<br>ID
<input autofocus="" class="form-control" id="id_mass" required="required" type="text">
<br>Dimensión de crecimiento:
<input autofocus="" class="form-control" id="dimension_tasacrecimiento_mass" required="required" type="text">
<br>Created
<input autofocus="" class="form-control" id="created_at_mass" required="required" type="text">
<br>update
<input autofocus="" class="form-control" id="updated_at_mass" required="required" type="text">

1
  • Funciona de maravilla, muchas gracias, solo un detalle en mi caso no asigne valores, los llame desde la base de datos, mas o menos asi <input data-id="{{$complejos->id}}">
    – M4uriXD
    Commented el 18 dic. 2018 a las 14:00
1

Asumiendo que entienda bien el problema, no veo la necesidad de crear N veces el body del modal, lo que yo haría (una de tantas formas posibles de solucionarlo) sería cargar la información en el modal al momento de hacer clic en el botón que lo despliega.

Para cargar la información, puede hacerse desde el contenido del HTML, pero yo prefiero jugar mucho con los atributos data-xxx, sin embargo y por lo que veo en el ejemplo, los datos no están visibles al usuario como tal, por lo cual yo lo almacenaría en un objeto en JavaScript, o si queremos hacerlo ligeramente más dinámico, haría una solicitud ajax cada vez que presiono un botón de modal y cargo la información (que también la puedo almacenar posteriormente en caché).

Voy a mostrar un ejemplo rápido con los elementos que hay para dar una idea, pero probablemente en un proyecto yo haría una solución mejor que esta (sin jQuery y menos manual):

// Obtenemos el modal
var modal = document.getElementById('myModal');

var myPlaces = {
    1: {name: "Complejo 1", manager: "Arturo"},
    2: {name: "Complejo 2", manager: "Alberto"}
};


// Obtenemos el elemento <span> que cierra el modal
var span = document.getElementsByClassName("close_v1")[0];

function openModal(id){
  $('#myModal .name').text(myPlaces[id].name);
  $('#myModal .manager').text(myPlaces[id].manager);
  $('#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="openModal(1)"/>
    </td>
    <td>
     <input type="button" id"btn-blank2" value="Open Modal" onclick="openModal(2)"/>
    </td>
  <tr>
</table>

<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">&times;</span>
			<h3 style="color: white;" class="name"></h3>
		</div>
		<div class="modal-body_v1">
			<label style="color: black;">Responsable:&nbsp;</label>
		 	<label style="color: grey;" class="manager"></label>
			<br>
			<br>
	  </div>
	
    <div class="modal-footer_v1">
    <!--_PUT SOME TEXT HERE!_-->
	  <br>
		</div>
	</div>
</div>
<br><br>

2
  • Sobre el tema del uso del @foreach lo hago de esa manera porque dependo de la cantidad de registros que hay en la tabla. por eso debo hacer que el botón se repita, e intenté lo mismo para el modal. Pero se me repetían todos los datos en el mismo modal. Luego removí los @foreach() y ahora solo me muestra los datos del 2do registro que tengo, al seleccionar el 1ero, si selecciono el 2do no muestra nada.
    – M4uriXD
    Commented el 14 dic. 2018 a las 16:22
  • No entendí lo que quieres decir, la solución que planteo (rudimentaria pero simple) es fácilmente adaptable a lo que buscas.
    – Shaz
    Commented el 14 dic. 2018 a las 16:44

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.