Menu
So I have a table pulling information from a database and I was wondering how I could make it refresh its information without reloading the whole page.
323
Creating a function that calls the AJAX request and using this function in setInterval() and set Interval for 5 sec. Now the function executes every 5 seconds and fetches new data from the server. It repeatedly executes the function even when the previous AJAX request is not successfully executed and return.
A table displays data, usually from a query - if you want to reload the query you can . trigger() it from any script, or another component (like a custom button) or the refresh button option in the table component will do this for you.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
You'll need a getTable.php page that displays your table, and nothing else: no headers, footers, etc.
PHP (getTable.php) - this can be any server side code (asp, html, etc..)
<?php echo '<table><tr><td>TEST</td></tr></table>'; ?> Then, in your JS, you can easily refresh the table by using the load() method:
HTML
<div id="tableHolder"></div> JS
<script type="text/javascript"> $(document).ready(function(){ refreshTable(); }); function refreshTable(){ $('#tableHolder').load('getTable.php', function(){ setTimeout(refreshTable, 5000); }); } </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
