-1

Sou iniciante em desenvolvimento web e estou desenvolvento um pequeno projeto para a empresa onde trabalho e estou com dificuldades para exibir em uma janela modal do bootstrap os dados retornados por uma consulta SQL. Pois ao clicar no botão visualizar, nada acontece!

Aqui a tabela onde são exibidos os registro retornados pelo banco de dados.

                   <tbody>
                     <?php
                        foreach ($changes as $change) {
                        echo '<tr> <td>';
                        echo $change['change'];
                        echo '</td> <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">';
                        echo $change['dtcriacao'];
                        echo '</td> <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">';
                        echo strtolower($change['status']);
                        echo '</td> <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">';
                        echo strtolower($change['tipo']);
                        echo '</td> <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">';
                        echo strtolower($change['subservico']);
                        echo '</td> <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">';
                        echo $change['dtinicio'];
                        echo '</td> <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">';
                        echo $change['dtfim'];
                        echo '</td> <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">';
                        echo'<input type="button" name="view" value="Visualizar" id="'.$change['change'].'" class="btn btn-primary btn-xs dados_change" />';
                        echo '</td> </tr>';
                    }
                    ?>
                  </tbody>

Na ultima coluna inseri um botão que tem seu id definido $change['change']

E aqui a função javascript que deveria receber esse valor ao ser clicado e o modal que exibirá a informação retornada pela pagina teste.php.

                <div id="dataModal" class="modal fade">
              <div class="modal-dialog modal-lg">
               <div class="modal-content">
                <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-window-close-o" aria-hidden="true"></i></span></button>
                 <h4 class="modal-title"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Informações do Usuário</h4>
               </div>
               <div class="modal-body" id="change_detail">
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
               </div>
             </div>
           </div>
         </div>

         <script>
           $(document).ready(function(){
            $('.dados_change').click(function(){
             var change_id = $(this).attr("id");
             $.ajax({
              url:"teste.php",
              method:"post",
              data:{change_id:change_id},
              success:function(data){
               $('#change_detail').html(data);
               $('#dataModal').modal({backdrop: 'static', keyboard: false});
                 //$('#dataModal').on('hidden.bs.modal', function () { location.reload();});
               }
             });
           });
          });
        </script>

1 Resposta 1

1

Faltou abrir a modal. Como você está querendo abrir a modal de forma manual com o click no botão, você usa o comando:

$('#dataModal').modal('show');

É interessante também colocar uma mensagem na modal de que o Ajax está em processamento, para o usuário notar que algo está acontecendo (não ficar a modal em branco enquanto o Ajax faz a requisição):

$('#change_detail').html('Carregando...');

O código ficaria assim:

$(document).ready(function(){
   $('.dados_change').click(function(){
      $('#dataModal').modal('show'); //  abre a modal
      $('#change_detail').html('Carregando...'); // mensagem
      var change_id = $(this).attr("id");
      $.ajax({
         url:"teste.php",
         method:"post",
         data:{change_id:change_id},
         success:function(data){
            $('#change_detail').html(data);
            $('#dataModal').modal({backdrop: 'static', keyboard: false});
            //$('#dataModal').on('hidden.bs.modal', function () { location.reload();});
         }
      });
   });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .