Pass Controller data to a modal in the Laravel 5.5 view

Asked

Viewed 906 times

0

I’m trying to pass data from a Controller to a Modal in the view.

In the view I have this code populating a datatable as soon as the page loads:

....
@foreach($exames as $exame)
                    <tr>
                        <td>{{$exame->registro}}</td>
                        <td>{{$exame->nome}}</td>
                        <td>{{$exame->motivo}}</td>
                        <td>{{$exame->telefone.' '.$exame->celular.' '.$exame->tel_recado}}</td>
                        <td>{{ Carbon\Carbon::parse($exame->data)->format('d-m-Y') }}</td>
                        <td>
                            <a class="btn btn-xs btn-success" href="{{url('/info_exame',$exame->id)}}">Visualizar</a>
                            <!--<button type="button" class=" btn btn-xs btn-success" data-toggle="modal" data-target="#modal-default-{{$exame->id}}">Visualizar</button>-->
                            <a href="{{url('/edita_exames', $exame->id)}}" class="btn btn-xs btn-info">Editar</a>                               
                            <button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#modal-apaga-{{$exame->id}}">Apagar</button>
  </td>
 </tr>
@endforeach
....

To popular this datatable I use this Route:

Route::get('/agenda_exames', 'AgendaExamesController@index')->name('agenda_exames');

With this Controller:

public function index()
{
    $exames = Tab_exames::all();

    return view('agendaexames', compact('exames'));
}

I was positioning Modal inside @foreach after the table, but in my understanding it is not a correct way to use since if the database has thousands of records, I wonder how big this view file will be.

Well, looking here in the stack I found this example:

Changing the content of Modal Laravel 5.1

I followed the example creating this Route:

Route::get('/info_exame/{id}', 'AgendaExamesController@show');

With this Controller

public function show($id){

    $info_exame = Tab_exames::findOrFail($id);
    return view('agendaexames', compact('info_exame'));        
}

There are some differences between my code and the example code, but I don’t think that would be a problem.

My Modal is this way

@if(isset($info_exame->id))
<!--Modal Mostra Dados Exame-->
<div class="modal modal-success fade" id="modal-default" tabIndex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Informações sobre o agendamento do exame</h4>
        </div>
        <div class="modal-body">
            <div class="row">                                            
                <div class="col-xs-12">
                    <span class="fa fa-calendar"></span>
                    <label>Data do exame</label>
                    <p><b>{{ Carbon\Carbon::parse($info_exame->data)->format('d-m-Y') }}</b></p></p>
                </div>                                                                                  
            </div>
            <hr>
            <div class="row">                                            
                <div class="col-xs-3">
                    <span class="fa fa-arrow-circle-right"></span>
                    <label>Nº Registro</label>
                    <p>{{$info_exame->registro}}</p>
                </div>
                <div class="col-xs-6">
                    <span class="fa fa-arrow-circle-right"></span>
                    <label>Nome</label>
                    <p>{{$info_exame->nome}}</p>
                </div> 
                <div class="col-xs-3">
                    <span class="fa fa-wheelchair"></span>
                    <label>Deficiência</label>
                    <p>{{$info_exame->deficiencia}}</p>
                </div> 
            </div>
            <div class="row">                                             
                <div class="col-xs-6">
                    <span class="fa fa-arrow-circle-right"></span>
                    <label>Motivo</label>
                    <p>{{$info_exame->motivo}}</p>
                </div>
                <div class="col-xs-3">
                    <span class="fa fa-phone"></span>
                    <label>Telefone</label>
                    <p>{{$info_exame->telefone}}</p>
                </div>
                <div class="col-xs-3">
                    <span class="fa fa-phone"></span>
                    <label>Celular</label>
                    <p>{{$info_exame->celular}}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <span class="fa fa-phone"></span>
                    <label>Recado</label>
                    <p>{{$info_exame->tel_recado}}</p>
                </div>
                <div class="col-xs-3">
                    <span class="fa fa-phone"></span>
                    <label>Nome do contato</label>
                    <p>{{$info_exame->nome_contato}}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <span class="fa fa-info-circle"></span>
                    <label>Observações</label>
                    <p>{{$info_exame->observacoes}}</p>
                </div>
            </div>
            <hr>

            <div class="row"> 

                <div class="col-xs-4">
                    <span class="fa fa-user-circle"></span>
                    <label>Cadastrado por</label>
                    <p>{{$info_exame->operador}}</p>
                </div>

                <div class="col-xs-4">
                    <span class="fa fa fa-calendar"></span>
                    <label>Gravado em</label>
                    <p>{{ Carbon\Carbon::parse($info_exame->created_at)->format('d-m-Y - H:i:s') }}</p>
                </div>
                <div class="col-xs-4">
                    <span class="fa fa fa-calendar"></span>
                    <label>Atualizado em</label>
                    <p>{{ Carbon\Carbon::parse($info_exame->update_at)->format('d-m-Y - H:i:s') }}</p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Fechar</button>
        </div>                                    
    </div>
    <!-- /.modal-content -->
</div>
<script type="text/javascript">
    $(window).load(function(){
        $('#modal-default').modal('show');
    });
</script>
<!-- /.modal-dialog -->

By clicking the table button I get this error

inserir a descrição da imagem aqui

What could be wrong? There is another more accurate and objective way to pass controller data to a modal?

  • This happens because he is looking for the variable $exams, but does not think because you are not passing it in the show method. Leave your foreach inside that if: @if(isset($exams))

  • @Diegovieira the $exams variable comes from another function within the controller and is used to populate the table, including the "View" button that picks up the id to pass the controller show. To popular the modal I’m using another function in the controller.

  • Yes, but the "show" redirects to the same file as the "index", correct?

  • Yeah, that’s exactly it.

  • When you call the show method, it redirects again to that page, then it "loses" the variable exams. Try to put the foreach inside the if I said to see if it will open the modal.

  • In this case it will stay pretty much the same way I was using before, ie, my modal was inside the foreach. From what I understand then Laravel does not allow more than one function to be used within the same controller that has routes to the same view?

  • @Diegovieira managed to solve with javascript even. First I use the modal "date" feature on the button, example: date-name. Then I use javascript to get the information and move to the modal: $(document).on('click', '.info-exame', function() { &#xA;$('#nome').text($(this).data('nome')); &#xA;$('#modal-default').modal('show'); &#xA;});

Show 3 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.