Passing data from a table to an Laravel and Ajax modal

Asked

Viewed 1,124 times

2

I have a table that brings my results from a search via Ajax. But I need to open a modal with more details about the table items, but I can’t pass the data to the modal. Follow the code:

Contents of my Query Controller

public function consultandoPropriedade(Request $request){

    if($request->ajax()){
        $output="";
        $resultados = DB::table('tb_propriedades')
                        ->join('tb_empreendimentos', 'tb_propriedades.cod_empreendimento', '=','tb_empreendimentos.cod_empreendimento' )
                        ->select('tb_propriedades.denominacao as nomePropriedade', 'tb_empreendimentos.denominacao', 'tb_empreendimentos.cod_empreendimento', 'tb_propriedades.valor', 'tb_propriedades.area', 'tb_propriedades.descricao', 'tb_propriedades.cod_propriedade')
                        ->where('tb_propriedades.denominacao', 'ILIKE', '%'.$request->criterio.'%')
                        ->orWhere('tb_empreendimentos.denominacao','ILIKE', '%'.$request->criterio.'%')
                        ->orWhere('tb_propriedades.descricao','ILIKE', '%'.$request->criterio.'%')                          
                        ->get();      

        if($resultados){
            foreach ($resultados as $key => $resultado) {
                $output.='<tr>'.                                
                             '<td>'.$resultado->nomePropriedade.'</td>'.                                
                             '<td>'.$resultado->denominacao.'</td>'.
                             '<td>'.$resultado->cod_empreendimento.'</td>'.
                             '<td>'.$resultado->cod_empreendimento.'</td>'.
                             '<td>'.$resultado->valor.'</td>'.
                             '<td>'.$resultado->area.'</td>'.
                             '<td>'.$resultado->descricao.'</td>'.                              
                             '<td><a class="teste detalhes" data-toggle="modal" data-target="#detalhes" data-denominacao="{{$resultado->nomePropriedade}}" style="color: #00628d;" href="#"><span class="glyphicon glyphicon-list" aria-hidden="true" title="Detalhes"></span></a></td>'.
                        '</tr>';
            }
            return Response($output);
        }else{
            $output.='<tr>'.
                            '<td>'."Nenhum resultado encontrado".'</td>'.                               
                        '</tr>';                
        }return Response($output);

    }

}

Contents of the consultation page

                <table class="table table-bordered table-hover">
                <thead>
                    <tr>                            
                        <th>Nome da propriedade</th>
                        <th>Empreendimento</th>
                        <th>Característica</th>
                        <th>Status</th>
                        <th>Valor (R$)</th>
                        <th>Área (ha) </th>
                        <th>Descrição </th>
                        <th>Ação</th>
                    </tr>
                </thead>
                <tbody>                     

                </tbody>                    
                </table>

                <!--Modal de visualização de detalhes do item -->
                <div class="modal fade" id="detalhes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog modal-lg" 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" id="myModalLabel">Detalhes da propriedade</h4>
                      </div>
                      <div class="modal-body">
                         <div class="container teste">
                            <h4>Aqui irão todos os detalhes da propriedade</h4>


                                <span class="denominacao"></span>

                        </div>
                    </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>                                      
                      </div>  
                    </div>
                  </div>
                </div>
        </div>      
    </div>
</div>
<script type="text/javascript">
    $('#criterio').on('keyup', function(){
        $valor = $(this).val();
        $.ajax({
            type :'get',
            url : '{{URL::to('/consulta/consultandoPropriedade')}}',
            data : {
                'criterio':$valor
            },              
            success :  function(data){                  
                $('tbody').html(data);
            }
        });
    })
</script>
<script type="text/javascript">
    $('.detalhes').on('click', function(){
    var nome = $(this).data('denominacao');        

    $('span.denominacao').text('nome');

});

</script>   

I’ve tried some ways, but I haven’t succeeded, someone can help me?

  • Since you are using jquery, leave your javascript code inside: $(Function () { //code here })

  • enter some value in $output example $output="Test value"; if what you entered print something, it means there’s something wrong with the request with the bank, I made a similar code according to the code you posted, it worked formally

  • So at first I see that you should take the hairs out of the nome when you enter span

  • @Marcoskubis Thank you, I made the modification.

  • @Robsongomesdejesus I did the test, the data is being brought perfectly to the initial display table. But I still can’t pass the data to the modal.

  • @Miguel I made the change and it didn’t work.

  • @Thamyt se Filtered alert(nome); appearance?

  • @Miguel doesn’t show up.

Show 3 more comments

1 answer

0


As a solution I concatenated the code of Eloquent that I was trying to pass to the modal.

Before:

'<td><a class="teste detalhes" data-toggle="modal" data-target="#detalhes" data-denominacao="{{$resultado->nomePropriedade}}" style="color: #00628d;" href="#"><span class="glyphicon glyphicon-list" aria-hidden="true" title="Detalhes"></span></a></td>'

Afterward:

'<td><a class="teste detalhes" data-toggle="modal" data-target="#detalhes" data-denominacao="'.$resultado->nomePropriedade.'" style="color: #00628d;" href="#"><span class="glyphicon glyphicon-list" aria-hidden="true" title="Detalhes"></span></a></td>'

Browser other questions tagged

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