I have this JS/Ajax code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready (function () {
var updater = setTimeout (function () {
$('div#ContentLeft').load('live_stats1.php', 'update=true')
$('div#ContentRight').load('live_stats2.php', 'update=true')
}, 1000);
});
</script>
which refreshes the content divs but they are not refreshing correctly.
My HTML is:
<div id="ContentLeft">
<?php include 'live_stats1.php'; ?>
</div>
<div id="ContentLeft">
<?php include 'live_stats2.php'; ?>
</div>
then on live_stats1.php
and live_stats2.php
i have my queries only
the queries take a while to run, so the results disappear until the queries have run again. how can i make it so the results stay in the divs until the new results have loaded?
and also if i check the console in google chrome, the local resources a new jquery.min.js
file is added every time it refreshes
here is a link to what my full PHP code looks like.
i want to be able to refresh the result divs only periodically
Try this
JS :
$(document).ready (function () {
function updatedivs(responsediv,linkurl)
{
$.post(linkurl,function(response){
$(responsediv).html(response);
});
}
var updater = setTimeout (function () {
var preventcache = (new Date).getTime();
updatedivs($('div#ContentLeft'),'live_stats1.php?update=true&r='+preventcache);
updatedivs($('div#ContentRight'),'live_stats2.php?update=true&r='+preventcache);
}, 1000);
});
Html :
<div id="ContentLeft">
<?php include 'live_stats1.php'; ?>
</div>
<div id="ContentRight">
<?php include 'live_stats2.php'; ?>
</div>
Delete <?php include 'live_stats1.php'; ?>
and <?php include 'live_stats2.php'; ?>
since you will get your stats anyways. Also, try to use caching if you have heavy select queries.