Refreshing html table using Jquery Java built on Codeigniter

Question

Guys I have a data coming from an outsource table which I'm presenting in table. The original data coming in Json which I'm decoding using PHP function and displaying.

I have been googling for auto refreshing that data and found this Auto refresh table without refreshing page PHP MySQL

I have managed to built what is suggested in the Ticked answers and seems like working for the first time but it doesn't refresh. So when page is loaded

I'm calling this

$(document).ready (function () {
                    var updater = setTimeout (function () {
                        $('div#user_table').load ('get_new_data', 'update=true');
                        /*  location.reload(); */
                    }, 1000);
                });

Which loads a function named get_new_data from controller file and loads on to

 <div class="container-fluid" id="user_table">

                       </div>

Codeigniter controller function is

 public function get_new_data(){

    $url = 'https://gocleanlaundry.herokuapp.com/api/users/';
    $result = $this->scripts->get_data_api($url);
    $data_row = $result;


                            $tbl    = '';
                            $tbl .= '<table class="table table-striped table-responsive" id="tableSortableRes">
                               <thead>
                                   <tr>
                                       <th>Name</th>
                                       <th>Email Address</th>
                                       <th>Role</th>
                                       <th>Status</th>
                                       <th>Action</th>
                                   </tr>
                               </thead>
                               <tbody>';

                                foreach($data_row as $row){
                                $tbl .= '<tr class="gradeX">
                                       <td>' . $row->name . '</td>
                                       <td>' . $row->email . '</td>
                                       <td>' . $row->role . '</td>
                                       <td><p id="' . $row->_id. '_status">'.( $row->alive == true ?  'Active' : 'Banned').' </p></td>
                                       <input id="' . $row->_id . 'status_val" value="' . $row->alive . '" type="hidden">
                                       <td class="center">

                                      <a href="#" id="' . $row->_id . '_rec" onclick="UpdateStatus(' . $row->_id . ')" class="btn btn-mini ">'
                                       . ($row->alive == '1' ? '<i class="fa fa-thumbs-o-up fa-fw"></i>' :  '<i class="fa fa-thumbs-o-down fa-fw"></i>' ) . '</a>
                                       </td>

                                   </tr>
                               ';
                                }
                                $tbl .= '</tbody>
                           </table>';

                                echo $tbl;

}

As I said when page loads is showing data so something is working but when I add new data to the database is doesn't automatically show up. I want function to call and refresh the data. Sorry I'm very new to javascript and jQuery so please go easy on me :)

Thank you guys

The settimeout fonction is called on l'y once. If you want your refresh function WAT called every 1000 ms, you should use setinterval function in place of settimeout. — Sébastien Doncker
– Sébastien Doncker, Commented Jul 6, 2015 at 6:06
@SébastienDoncker thanks man but I'm really new on Jquery things can you give me an example or rewrite my code? please — Zee
– Zee, Commented Jul 6, 2015 at 6:09
I don't really want it to load every sec. 4 times a minute would do for me too. I just want new data pulling in automatically — Zee
– Zee, Commented Jul 6, 2015 at 6:11
Yeahay I googled the setInterval and it's working for me :).... @SébastienDoncker you are a star — Zee
– Zee, Commented Jul 6, 2015 at 6:13

Sébastien Doncker · Accepted Answer · 2015-07-06 06:56:41Z

3

To refresh every 15 secondes (4 times a minute), you should use setInterval function in place of setTimeout.

Your code will be like this:

$(document).ready (function () {
    var updater = setInterval (function () {
        $('div#user_table').load ('get_new_data', 'update=true');
    }, 25000);
});

EDIT: But if you want to be sure to not overload your page and, as you ask, to load first the data then refresh regularly. You have to do the following :

load your data the first time.
When it's finished, call a setTimeout to refresh in 25 secs.
When your page is refreshed, call a SetTimeout to refresh it in 25 secs.
and again, and again.

This is better than using setInterval. To do that, you have to use the complete callback of jQuery load function http://jqapi.com/#p=load .

function refresh() {
    setTimeout(function() {
          $('div#user_table').load ('get_new_data', 'update=true', refresh);
    }, 25000);
}

$(document).ready (function () {
    $('div#user_table').load ('get_new_data', 'update=true', refresh);
});

edited Jul 6, 2015 at 6:56

answered Jul 6, 2015 at 6:14

Sébastien Doncker

2904 silver badges11 bronze badges

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

2 Comments

Zee Over a year ago

Thanks for that, one more question. How to load first and then call interval. What's happening with above is it's taking to long to show the data on page load

Sébastien Doncker Over a year ago

@Zee I just edit my answer to show you how to do that.

Collectives™ on Stack Overflow

Refreshing html table using Jquery Java built on Codeigniter

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related