Execute query by pressing a button and send to modal

Question

I have the following code where I want to click a button, and in doing so run a Query and display the results in a Modal

Therefore, the button:

<a class="btn-sm btn-success view_data" data-target="view_data">

Page where I run sql (Route test)

$query = ("select... exemplo")
$output = '';
$output .= '
<table class="w3-table-all w3-hoverable">
 <tr>
   <td><b>Nome<b/></td>
 </tr>';
      for ($i = 1; $i < count($query); $i++) {
      $resul = $query[$i]["nam_per_sching_cla"];
      $output .= '
 <tr><td>'. $resul . '</td>
 </tr>';
}
$output .= '</table>';
echo $output;

jquery function with ajax to call php page and send data to modal:

<script type="text/javascript">
$(document).ready(function(){
    $('.view_data').click(function(){
        var situacao = $(this).attr("dta_sching");

        $.ajax({
            //url:"http://localhost:8080/yogafit/public/teste/util/schedule_class.php",
            url:"{{route('teste')}}",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            method:"post",
            data:{situacao:situacao},
            success:function(data){
                $("#prop-details").html(data); //Local onde os dados vai ser mostrado, modal no caso
                $('#myModalClass').modal("show");
            }
        });

    });
});

Modal:

<div class="modal fade" id="myModalClass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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" style="text-align:center">Turma</h4>
        </div>
        <div class="modal-body">


        </div>
    </div>
</div>

It turns out that it returns the "empty" modal as below:

I don’t know what I might be doing wrong so that the data is not displayed in the modal.

Answer 1

Try updating after the modal is displayed.

For this you can treat the event "show":

$('#myModalClass').modal("show");
$('#myModalClass').on('shown', function() {
     $("#prop-details").html(data);
});

If you’re using Bootstrap version 3, use like this:

$('#myModalClass').on('shown.bs.modal', function() {
     $("#prop-details").html(data);
});