1

En mi vista tengo echo un foreach para traer todos los resultados de una consulta. Y dos botones uno para abrir una página relacionada a su id y otro botón que abre el id en un modal. El primer botón funciona bien ya que al imprimir cada foreach queda asignado la ruta al botón. Pero no se hacer lo mismo con el modal. que al hacer click en modal el id seleccionado me lo muestre en el modal, para después usar ese ID para mandarlo a la ruta (clientes.buscar, $id).

vista:

  @foreach($clientes as $cliente)
      <div class="col-md-10 col-md-offset-1">
          <div class="cliente-texto">
            <a class="cliente-nombre">{{ $cliente -> nombre }}</a>
          </div>
          <div class="cliente-botones row"> 
            <a class="btn btn-default pull-left" href="{{ route('clientes.perfil', $cliente -> id ) }}" role="button"> Perfil</a>
            <a href="#" data-toggle="modal" data-target=".pop-up-1" class="btn btn-danger pull-left" role="button"> Modal</a>
          </div>
      </div>
  @endforeach 

Modal:

    <!--  Modal contenido -->
  <div class="modal fade pop-up-1" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Información Importante</h4>
        </div>
        <div class="modal-body">
            <div class="col-sm-12 personal-info">
                {!! Form::model('cliente', ['route' => ['clientes.buscar', $cliente -> id],'method' =>'PUT']) !!}
                 <ul class="list-group row">
                    <li class="list-group-item col-sm-4 list-group-item-info">El ID Seleccionado es:</li>
                    <li class="list-group-item col-sm-8"> ?????</li>
                 </ul>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          {!! Form::submit('Acepto',['class' => 'btn btn-primary'] ) !!} 
        </div>
      </div>
    </div>
  </div>
8
  • ¿qué es lo que quieres mostrar exactamente en el modal? Si entendí bien es solo el ID?
    – Shaz
    el 1 dic. 2016 a las 17:37
  • Exacto, para poder hacer operaciones con el ID, ya que si solo imprimo ($cliente -> id) me traerá el último número del foreach, ejemplo si tengo 5 resultados el id me mostrara 5, pero lo que quiero es si selecciono el boton “Modal” de la vista y tiene asignado ID=2, cuando se abra el modal me muestre en “<li class="list-group-item col-sm-8"> 2 </li>. el 1 dic. 2016 a las 17:39
  • todavía no logro solucionarlo, igual sugerencias o ideas son bien recibidas. el 2 dic. 2016 a las 1:12
  • Veo que estás usando el método PUT, ¿estás actualizando información en la base de datos?
    – Shaz
    el 2 dic. 2016 a las 3:59
  • si estoy actualizando información con algunos datos del modal, pero no se como hacer para enviar el id (foreach al modal) {!! Form::model('cliente', ['route' => ['clientes.buscar', ? ],'method' =>'PUT']) !!}, he intentado con jquery pero al editar la porción de texto solo lo hace una vez. pero si cancelo y selecciono otro ya no lo toma, sigue seleccionando el que elegí primero y debo refrescar la pagina (no tiene caso tener un modal para eso). igual si uso ajax siento que hacer una llamada al server solo para traer el id, no es bueno. espero tu ayuda me esta estresa esto... jeje. saludos.- el 2 dic. 2016 a las 15:47

1 respuesta 1

1

Una opción típica en este caso es sustituir el id en la URL de forma dinámica, por JavaScript, agregando un handler al momento de abrir el modal, en este caso utilizando los eventos propios del modal de Bootstrap:

@foreach($clientes as $cliente)
  <div class="col-md-10 col-md-offset-1">
      <div class="cliente-texto">
        <a class="cliente-nombre">{{ $cliente -> nombre }}</a>
      </div>
      <div class="cliente-botones row"> 
        <a class="btn btn-default pull-left" href="{{ route('clientes.perfil', $cliente->id ) }}" role="button"> Perfil</a>
        <a href="#" data-toggle="modal" data-target=".pop-up-1" data-cliente="{{ $cliente->id }}" class="btn btn-danger pull-left" role="button"> Modal</a>
      </div>
  </div>
@endforeach 

Modal:

    <!--  Modal contenido -->
  <div class="modal fade pop-up-1" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Información Importante</h4>
        </div>
        <div class="modal-body">
            <div class="col-sm-12 personal-info">
                {!! Form::model('cliente', ['route' => ['clientes.buscar', 'REQ_ID'],'method' =>'PUT', 'id' => 'form-cliente-buscar']) !!}
                 <ul class="list-group row">
                    <li class="list-group-item col-sm-4 list-group-item-info">El ID Seleccionado es:</li>
                    <li class="list-group-item col-sm-8 show-cliente-id"></li>
                 </ul>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          {!! Form::submit('Acepto',['class' => 'btn btn-primary'] ) !!} 
        </div>
      </div>
    </div>
  </div>

<script>
$('.pop-up-1').on('show.bs.modal', function (e) {
  var boton = e.relatedTarget;
  var clienteId = boton.data('cliente');

  var form = $('#form-cliente-buscar');
  form.attr('action').replace('REQ_ID', clienteId);
  $('.show-cliente-id').text(clienteId);
})
</script>

Esta solución no está probada, pero la idea es esa, tal vez tengas que hacer una o dos correcciones/mejoras.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.