1

creo que esta pregunta ya la han hecho antes, pero no logro solucionar mi problema con lo que hay en los otros foros, espero me indiquen que estoy haciendo mal o que es lo que me falta agregar a mi código. Resulta que estoy empezando en laravel y tengo unos datos que traigo desde una base datos y me los muestra listados en una tabla, hasta aquí todo bien pero lo que quiero es que si se presiona en una fila de la tabla me muestre un modal con el Id de la fila que presione. con el código que tengo solo logro mostrar el ultimo Id, aquí mi código.

@extends('plantilla')
@section('seccion')
<h1>Enlaces</h1> 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#Id</th>
      <th scope="col">ISP</th>
      <th scope="col">SSEE</th>
      <th scope="col">IP</th>
      <th scope="col">Cod.Servicio</th>
      <th scope="col">Tipo Enlace</th>
      <th scope="col">Prioridad</th>
    </tr>
  </thead>
  <tbody>
@foreach ($enlaces as $item2) 

<tr>
  <td>{{$item2->Enl_Isp_id}}</a></td>
  <td>{{$item2->Enl_Sse_id}}</td>
  <td>{{$item2->Enl_num_ip}}</td>
  <td>{{$item2->Enl_Equ_id}}</td>
  <td>{{$item2->Enl_codigo_serv}}</td>
  <td>{{$item2->Enl_Tpe_Id}}</td>
  <td>{{$item2->Enl_prioridad_id}}</td>
  <td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id">Ver informacion </button></td>

  </tr>   
         @endforeach  
       <div id="id" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">{{ $item2->Enl_id }}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

              id {{  $item2->Enl_id }}  

              </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>


          </div>
        </div>
      </div>

         </tbody>
 </table>







@endsection

2 respuestas 2

1

Para poder solucionarlo, necesitas usar javaScript

  • tienes que ponerle una clase al <tr> de tu tabla por cada fila
  • tienes que ponerle al <tr> una propiedad data-id="aqui-tu-id"

Quedaría algo así el <tr> de tu tabla:

<tr class="miclase" data-id="miid"></tr>

Te comparto un ejemplo de como hacerlo con javascript (jquery)

$( "table" ).on( "click", ".miclase", function() {
  console.log( $( this ).data("id") ); //aqui tienes cada id por cada click
});
1

Puedes trabajarlos con funciones, mandando como parámetro el id que quieres mostrar:

@extends('plantilla')
@section('seccion')
<h1>Enlaces</h1> 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#Id</th>
      <th scope="col">ISP</th>
      <th scope="col">SSEE</th>
      <th scope="col">IP</th>
      <th scope="col">Cod.Servicio</th>
      <th scope="col">Tipo Enlace</th>
      <th scope="col">Prioridad</th>
    </tr>
  </thead>
  <tbody>
@foreach ($enlaces as $item2) 

<tr>
  <td>{{$item2->Enl_Isp_id}}</a></td>
  <td>{{$item2->Enl_Sse_id}}</td>
  <td>{{$item2->Enl_num_ip}}</td>
  <td>{{$item2->Enl_Equ_id}}</td>
  <td>{{$item2->Enl_codigo_serv}}</td>
  <td>{{$item2->Enl_Tpe_Id}}</td>
  <td>{{$item2->Enl_prioridad_id}}</td>
  <td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#id" onclick="ver_id({{ $item2->Enl_id }});">Ver informacion </button></td>

  </tr>   
         @endforeach 

         </tbody>
 </table> 
       <div id="id" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">{{ $item2->Enl_id }}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

              <h4 id="id_obtenido"></h4>

              </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>


          </div>
        </div>
      </div>
@endsection

function ver_id(id){
    $("#id_obtenido").text("El id es "+id);
}

Si quieres que el id obtenido se muestre en varios lugares no ocupes el atributo id, mas bien una clase:

<div id="id" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel" class="id_obtenido"></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

              <h4 class="id_obtenido"></h4>

              </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>


          </div>
        </div>
      </div>
function ver_id(id){
    $(".id_obtenido").text("El id es "+id);
}

Esto suponiendo que "Enl_id" sea el id que quieres mostrar.

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.