Update content in HTML table using PHP and AJAX

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.

Nilesh Daldra · Accepted Answer · 2016-09-28 12:10:25Z

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

answered Sep 28, 2016 at 12:10

Nilesh Daldra

831 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robbert de Vries Over a year ago

I do not totally understand how you want me to implement this. Could you use my code to show me where to put where to make it work.

Michail M. · Accepted Answer · 2016-09-28 11:28:02Z

0

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');
  }
});

answered Sep 28, 2016 at 11:28

Michail M.

7555 silver badges11 bronze badges

3 Comments

Robbert de Vries Over a year ago

So i put the automatically generated table in a standalone tab.e.php file and then add the script with the ajax code to it?

Michail M. Over a year ago

yes, put it in a standalone and add script which handling ajax request

Robbert de Vries Over a year ago

So how will the table be shown on my page if its not inside the actual page ?

Collectives™ on Stack Overflow

Update content in HTML table using PHP and AJAX

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related