Problem when displaying modal data from BD in Laravel

Question

Problem when displaying modal data from BD in Laravel

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I have a table that brings all the records of my complex table and a button that opens a modal, the problem is that when selecting a record of the table (In the view) it does not show me as it corresponds the information of the chosen registry.

In the following example I will similarly reproduce the problem I have:

// 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>

In a similar way to the previous example I have a table which brings me some fields from a table in my database, a button that with the help of @foreach() plus% @if() repeats (the button) according to the amount of data that the table has and in turn this shows me the data of the chosen record.

So that the problem I have is well understood, I will explain it in the following way: In a table that is filled with information from the database I have, ONE BUTTON ( > that is repeated only since to show all the records in a table I had to put everything in an @foreach) ; where the data of the selected record should be displayed in a modal, for each record its respective information must be shown. But, on the other hand, that does not happen; it shows me only the first record of the table along with its data, and when I press a different one, it keeps showing me the first record always.

I leave the code I have:

<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>

I use Laravel 5.6 with PHP and blade; What could I have done wrong?

mysql php laravel

asked by M4uriXD 14.12.2018 в 15:14

source

2 answers

1

Assuming you understand the problem well, I do not see the need to create N times the body of the modal, what I would do (one of many possible ways of solving it) would be to load the information in the modal when clicking on the button that displays it.

To load the information, it can be done from the HTML content, but I prefer to play a lot with the attributes data-xxx , however, and from what I see in the example, the data is not visible to the user as such, for which I would store it in an object in JavaScript, or if we want to make it slightly more dynamic, I would make an ajax request every time I press a modal button and load the information (which I can also store later in cache).

I will show a quick example with the elements that are there to give an idea, but probably in a project I would do a better solution than this (without jQuery and less 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>

answered by 14.12.2018 в 16:01

modal bootstrap close with enter c - Memory leak in realloc

score 2 · Accepted Answer

I do it in the following way, in each button the corresponding information is placed in the records

<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>

in which a javascript function is executed that takes the data that the button has and inserts it to the 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"));


});

HTML code

<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">