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,
source to share
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);
});
source to share