Query database and display in modal window

Question

I am a beginner in web development and I am developing a small project for the company where I work and I am having difficulties to display in a modal window the bootstrap data returned by an SQL query. 'Cause when you click the preview button, nothing happens!

Here is the table where the records returned by the database are displayed.

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

In the last column insert a button that has its id set $change['change']

And here the javascript function that should receive this value when clicked and the modal that will display the information returned by the test page.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>

Answer 1

Missed to open the modal. As you want to open the modal manually with the click on the button, you use the command:

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

It is also interesting to put a message in the modal that Ajax is in processing, for the user to notice that something is happening (not to leave the modal blank while Ajax makes the request):

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

The code would look like this:

$(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();});
         }
      });
   });
});