使用PHP和AJAX更新HTML表中的内容

Question

I am trying to update the contents of the table by pressing the update button in PHP using the MySQL connection. I want to combine Ajax and PHP, because by using that I don't have to refresh the page every time.

I don't have any idea to do this. And I haven't found anything on the internet. So I came here to ask.

Here you see a picture of how my current page looks like.

My table

The code I use to generate/populate the table:

<div class="col-md-12">
    <h3 class="title">Active Tasks</h3>
    <table class="table table-bordered table-condensed">
        <thead>
            <tr>
                <th>Task</th>
                <th>Predecessor</th>
                <th>Dev</th>
                <th>MOSCOW</th>
                <th>Plan</th>
                <th>Do</th>
                <th>Check</th>
                <th>Act</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <?php
            $query = mysqli_query($conn, $SQL); 
            while ($row = mysqli_fetch_array($query)) {?>
            <tr class="active">
                <td style="display:none;><?php echo $row['ID'];?></td>
                <td style="display:none;"><?php echo $row['ProjectID'];?></td>
                <td><?php echo $row['Task'];?></td>
                <td><?php echo $row['Predecessor'];?></td>
                <td><?php echo $row['Dev'];?></td>
                <td><?php echo $row['MOSCOW'];?></td>
                <td class="js-Task-Plan"><?php echo $row['Plan'];?></td>
                <td class="js-Task-Do"><?php echo $row['Do'];?></td>
                <td><?php echo $row['Check'];?></td>
                <td><?php echo $row['Act'];?></td>
                <td>
                    <button type="button" class="js-TimerStart btn btn btn-default">Start</button>
                    <button type="button" class="js-TimerPauzeer btn btn-default">Pauzeer</button>
                    <button type="button" class="js-TimerResume btn btn-default">Resume</button>

                    <a class="btn btn-default btn-info" href="editTask.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Aanpassen</a>
                    <a class="btn btn-default btn-danger" href="delete_task.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Verwijderen</a>
                </td>
            </tr>
            <?php  } ?>
        </tbody>
    </table>
    <button class="btn btn-block btn-default btn-success" name="UpdateTable"><span style="font-weight: bold;">Update</span></button>
</div>

Thank you for every bit of response and information.

Answer 1

Its not too big issue. You have to just give some class and ids to your table row and tds. first of all give unique ids to all rows, in your case you have <?php echo $row['ID'];? and give same class to all rows these will use later steps. and give data-id to each row with unique id...so every tr may be named with <tr id='tr_<?php echo $row['ID'];?>' class='projects' data-id='<?php echo $row['ID'];?>'> and Predecessor td witl be <td id='p_<?php echo $row['ID'];?>'></td>

now i am asssuming that you want to update each project Predecessor every 3 seconds..then just you need to write ajax call for updation.

setInterval(function(){ 
$('.project').each(function(){
var id=$(this).data('id');
 $.ajax({
   url:'php_file _name_that_takes_project_id_and_get_details_from_database',
   data:{id:id},
   type:'POST',
   sucess:function(data){
     // here data is returned value by ajax php file call which takes project id and fetch Predecessor related to this id.
$('#p_'+id).html(data);

   }
   });
});
, 3000);

Answer 2

Put it in separate script:

                        <?php
                          $query = mysqli_query($conn, $SQL); 
                           while ($row = mysqli_fetch_array($query)) {?>
                               <tr class="active">
                               <td style="display:none;><?php echo $row['ID'];?></td>
                               <td style="display:none;"><?php echo $row['ProjectID'];?></td>
                               <td><?php echo $row['Task'];?></td>
                               <td><?php echo $row['Predecessor'];?></td>
                               <td><?php echo $row['Dev'];?></td>
                               <td><?php echo $row['MOSCOW'];?></td>
                               <td class="js-Task-Plan"><?php echo $row['Plan'];?></td>
                               <td class="js-Task-Do"><?php echo $row['Do'];?></td>
                               <td><?php echo $row['Check'];?></td>
                               <td><?php echo $row['Act'];?></td>
                               <td>
                                    <button type="button" class="js-TimerStart btn btn btn-default">Start</button>
                                    <button type="button" class="js-TimerPauzeer btn btn-default">Pauzeer</button>
                                    <button type="button" class="js-TimerResume btn btn-default">Resume</button>

                                    <a class="btn btn-default btn-info" href="editTask.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Aanpassen</a>
                                    <a class="btn btn-default btn-danger" href="delete_task.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Verwijderen</a>
                                </td>
                               </tr>
                          <?php  } ?>

and call it 'table.php'.

and add js code, which will be make AJAX call to table.php and update our table

$.ajax('table.php', {
      success: function(data) {
     $('.table-bordered.table-condensed tbidy').html($(data));
     $('#notification-bar').text('The page has been successfully loaded');
  },
  error: function() {
     $('#notification-bar').text('An error occurred');
  }
});