向动态加载的HTML表中添加一行，并通过AJAX和.load刷新它

Question

I have an HTML table that loads its values dynamically through a PHP snippet with SQL sentences. There is also a Select and a button to add a row to the table. This button is listened by an ajax procedure to send the data to the php and to insert the new row as a record in the database. I want of course the table (not all the page) refresh the information. For that I use the jquery ($).load function. Everything is working good, the database is updated, but when the HTML table refresh it appears empty. What I am doing wrong?

Here is the HTML table:

<!-- Procedure Table-->
    <div id=idProcedimientos class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
            <div class="x_title">
                        <h2>Procedures <small></small></h2>
                              <div class="clearfix"></div>
                    </div>

    <div class="x_content">
    <div class="row">
    <div class="col-sm-12">
    <div class="card-box table-responsive">                

            <div class="form-group">

                            <div class="col-md-2 col-sm-6 col-xs-12">

                                <?  $qProcedure = "SELECT * FROM Procedures";
                                    $resultsProcedure = mysqli_query($db, $qProcedure);
                                    echo "<select id='idSelected_procedure' name='selected_procedure' class='form-control'>";

                                    while ($rowProcedure = mysqli_fetch_assoc($resultsProcedure)) {

                                          echo"<option value ='{$rowProcedure['IdProcedure']}'>{$rowProcedure['Name']}</option>";

                                         };

                                    echo "</select><br />";

                                ?>

                            </div>
            </div>


    <div class="form-group">
 <div class="col-md-12 col-sm-6 col-xs-12">
      <button type="submit" id="idBttnProcedure-add" class="bttnProcedure-add btn btn-round btn-primary">Add Procedure</button><br /><br />                                                                     
     </div>  
</div>        

<div id="idProcedureTable" class="table-editable">

    <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">                  

    <thead>
                      <tr>

                       <th>Procedure</th>
                                           <th>Date</th>
                                           <th>Ok</th>
                                           <th>Summary</th>
                                           <th>Remove</th>
                         </tr>

                    </thead>

                    <tbody>



                <?  

                  $queryProcedure = "SELECT FoalingsP.IdFoaling, Procedures.Name, JournalProcedures.IdJournalFk, FoalingsP.Date, FoalingsP.Ok, 
                                                 FoalingsP.Summary  FROM FoalingsP, Procedures, JournalProcedures

                                                 WHERE
                                                 JournalProcedures.IdJournalFk=$row[IdJournal] AND
                                                 JournalProcedures.IdJournalProcedure=FoalingsP.IdJournalProcedureFk AND
                                                 JournalProcedures.IdProcedureFk=Procedures.IdProcedure

                                                 UNION

                                                 SELECT UltrasonographiesP.IdUltrasonography, Procedures.Name, JournalProcedures.IdJournalFk, UltrasonographiesP.Date, 
                                                 UltrasonographiesP.Ok, UltrasonographiesP.Summary  FROM UltrasonographiesP, Procedures, JournalProcedures

                                                 WHERE
                                                 JournalProcedures.IdJournalFk=$row[IdJournal] AND
                                                 JournalProcedures.IdJournalProcedure=UltrasonographiesP.IdJournalProcedureFk AND
                                                 JournalProcedures.IdProcedureFk=Procedures.IdProcedure";


                                $resultsProcedure = mysqli_query($db, $queryProcedure);

                              while ($rowProcedure = mysqli_fetch_assoc($resultsProcedure)){                                                                                                                                                                                                  
                                  echo " <tr><td>{$rowProcedure['Name']}</td>
                                  <td>{$rowProcedure['Date']}</td>";

                                  if($rowProcedure["Ok"]=="1") {echo "<td contenteditable='true'><label><input type='checkbox' checked></label></td>";};    
                                  if($rowProcedure["Ok"]=="0") {echo " <td contenteditable='true'><label><input type='checkbox'></label></td>";};

                                  echo "<td>{$rowProcedure['Summary']}</td>
                               <td><span id='tableProcedure-remove' class='tableProcedure-remove table-remove glyphicon glyphicon-remove'></span></td></tr>";
                             };       

                 ?>  


                  </tbody>


    </table>


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

    </div>
     <!-- /Procedure Table-->

And here is the script:

 <script> $('.bttnProcedure-add').click(function () { var idJournal = "<?php echo $row[IdJournal]; ?>"; var idSelected_procedure = document.getElementById("idSelected_procedure").value; alert(idSelected_procedure); $.ajax({ type: "POST", url: "server.php", data: {mare_idJournal:idJournal, mare_idSelected_procedure:idSelected_procedure }, success: function(msg){ alert("Everything saved correctly"); $("#datatable-responsive").load("control_horse_journal.php #datatable-responsive"); } }); return false; }); </script> 

Thank you very much.

Answer 1

Thanks to @epascarello for the advice. I got the solution. I discarded .load function, and instead I appended a row directly with .after .The final script is like this:

 <script type="text/javascript"> $('.bttnProcedure-add').click(function () { var idJournal = "<?php echo $row[IdJournal]; ?>"; var idSelected_procedure = document.getElementById("idSelected_procedure").value; var $TABLE_PROCEDURES = $('#idProcedureTable'); var selectedProcedure = document.getElementById("idSelected_procedure"); var name = selectedProcedure.options[selectedProcedure.selectedIndex].text; var rowP="<tr>" +"<td>" +name+"</td>" +"<td>"+"0000-00-00 00:00:00"+"</td>" +"<td contenteditable='true'><label><input type='checkbox'></label></td>" +"<td>"+""+"</td>" +"<td><span id='tableProcedure-remove' class='tableProcedure-remove table-remove glyphicon glyphicon-remove'></span></td>" +"</tr>"; $('#bodyTbProcedure tr:last').after(rowP); $.ajax({ type: "POST", url: "server.php", data: {mare_idJournal:idJournal, mare_idSelected_procedure:idSelected_procedure }, success: function(msg){ alert("Everything saved correctly"); //$("#datatable-responsive").load("control_horse_journal.php #datatable-responsive"); } }); return false; }); </script>