'Auto refresh MySQL Query results in PHP
I have these DIVS which run PHP functions and return results. How can i make the returned results automatically refresh every X seconds without refreshing the whole page.
I just want to re-run the PHP/MySQL queries that are in the functions
<div class="container">
<div class="box"><h2>Callers Waiting</h2><?php echo CallersWaiting($queue_name, date('Y-m-d H:i:s', strtotime('-1 hour'))); ?></div>
<div class="box"><h2>Average Hold Time</h2><?php echo AverageHoldTime($queue_name, $date); ?></div>
<div class="box"><h2>Longest Wait Time</h2><?php echo LongestWaitTime($queue_name, $date); ?></div>
<div class="box"><h2>Shortest Wait Time</h2><?php echo ShortestWaitTime($queue_name, $date); ?></div>
</div>
UPDATE:
I have used this code:
<div class="container"></div>
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('.container').load('data.php', function(){
setTimeout(refreshTable, 2000);
});
}
</script>
then all my divs and PHP Functions run on a page called data.php but nothing is showing on my index.php page
Solution 1:[1]
<meta http-equiv="refresh" content="5; URL=http://www.yourdomain.com/yoursite.html">
regresh page after 5 sec and if you need js i can send it too
setTimeout(function(){
window.location.reload(1);
}, 5000);
For ajax you need a page that return all you data in Json or xml form.
then you need to make $.POST or $.GET or $AJAX request to that page and then parse it and then update your html elements.
example
http://danielnouri.org/notes/2011/03/13/an-ajax-page-update-mini-tutorial/
Solution 2:[2]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('data.php');
}, 2000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div class="container">Loading data ...</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 |