Updating html table using jQuery Java built on Codeigniter
Guys I have data coming from outsourcing table which I present in table. Raw data coming into Json which I decode using PHP function and display.
I have searched search queries to automatically update this data and found this Automatic update table without refreshing PHP MySQL page
I was able to build what is suggested in the Answers and it seems like it works the first time, but it doesn't update. So when the page loads
I call it
$(document).ready (function () {
var updater = setTimeout (function () {
$('div#user_table').load ('get_new_data', 'update=true');
/* location.reload(); */
}, 1000);
});
Loads a function named get_new_data from a controller file and loads into
<div class="container-fluid" id="user_table">
</div>
Codeigniter controller function
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 the page load shows data, so something works, but when I add new data to the database, it doesn't appear automatically. I want the function to call and update data. Sorry I am very new to javascript and jQuery, so please walk through on me :)
Thanks guys,
To refresh every 15 seconds (4 times per minute), you should use the setInterval function instead of the setTimeout function.
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 make sure you don't overload your page and, as you ask, load the data first and then refresh it regularly. You must do the following:
- Upload your data for the first time.
- When finished, call setTimeout to update after 25 seconds.
- When your page refreshes, call SetTimeout to refresh it in 25 seconds.
- and over and over.
This is better than using setInterval. To do this, you need to use the full jQuery load function callback 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);
});