Go from variable to modal

Question

Go from variable to modal

Navigation

#1 by (1 votes)

1

In my view I have a foreach to bring all the results of a query. And two buttons one to open a page related to its id and another button that opens the id in a modal. The first button works well since when you print each foreach the path to the button is assigned. But do not do the same with the modal. that when you click on modal the selected id shows it to me in the modal, to then use that ID to send it to the route (clients.search, $ id).

view:

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

php bootstrap laravel

asked by Luis Cárdenas 01.12.2016 в 18:23

source

1 answer

Configure connectionString using EF Database First Syntax error in MySQL script

score 1 · Answer 1

A typical option in this case is to replace the id in the URL dynamically, by JavaScript, adding a handler when opening the modal, in this case using the events of the Bootstrap modal:

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

This solution is not proven, but the idea is that, maybe you have to make one or two corrections / improvements.