Passing data from a table to a modal Laravel and Ajax

2

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

Content 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);

    }

}

Query page content     

                <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 have tried some ways, but I have not been successful, can anyone help me?

    
asked by anonymous 29.03.2017 / 20:27

1 answer

0

As a solution I concatenated the Eloquent code 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>'

After:

'<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>'
    
10.04.2017 / 14:12