I have a div that reloads data from another page. The code looks like this:
var auto_refresh = setInterval(
function() {
$('#mydiv').load('load.php');
}, 1000); // refresh every 1000 milliseconds<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div id="mydiv">
<?php echo 'loading...';?>
</div>This works wonderfully to refresh my data. However, I don't really want it to refresh the div every 1000 milliseconds, I want it to check to see if anything has changed, and if so then refresh the div.
For example:
$current_vericode = 'kdsjfkdfj';
$sql = "SELECT\n".
" vericode\n".
"FROM\n".
" users\n".
"WHERE\n".
" users.id = 3";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$new_vericode = $row["vericode"];
}
}
if ($current_vericode == $new_vericode)
{
//don't refresh the div
} else {
//refresh it and...
//$current_vericode = $new_vericode
}
This way all that is happening is that it checks mysql to see if the specified field has changed. If it hasn't then it doesn't do anything. If it has then it will refresh the div and update the code.
I understand that the effect will be the same as constantly updating, but I really want to add forms and stuff which I could do with it not updating until the mysql field has changed.
So every 1000 milliseconds, check mysql and compare it to current value. If they are the same then end / exit. If they have changed then refresh and save new value as current.
Any ideas?
You can do this in two ways:
The first call checks whether it's time to reload using a timestamp or version counter with the last good version.
var auto_refresh = setInterval(
function() {
$.post('check-load.php').done(function(reply) {
if (reply.timestamp < $('#mydiv').attr('timestamp')) {
return;
}
$('#mydiv').load('load.php').attr({ timestamp: reply.timestamp });
});
}, 1000); //
Here the HTML is generated at each call, but only really loaded if needed. It will be downloaded every time though.
function() {
$.post('check-load.php').done(function(reply) {
if (reply.timestamp < $('#mydiv').attr('timestamp')) {
return;
}
$('#mydiv').html(reply.html).attr({ timestamp: reply.timestamp });
});
}, 1000); //
In the second case you send a JSON containing also the HTML of the generated page.
If the load check is easy and the HTML generation slow, then you should go with the first method. If the traffic's a problem, the first method is better.
// check-load (with HTML)
The previous code has MySQL generate a timestamp and reloads the DIV when the timestamp changes. The code below is closer to yours:
$current_vericode = 'kdsjfkdfj';
$sql = 'SELECT vericode FROM users WHERE users.id = :id';
$rs = $conn->prepare($sql);
$rs->execute([ ':id' => 3 ]); // or Array(':id' => 3) with older PHPs
...
if ($current_vericode == $new_vericode) {
$reply = [ 'refresh' => 'no' ];
} else {
$reply = [ 'refresh' => 'yes', 'html' => '<p>HELLO WORLD</p>' ];
}
Header('Content-Type: application/json;charset=utf-8');
die(json_encode($reply));
But now the jQuery code has to change slightly to read .refresh:
$.post('check-load.php').done(function(reply) {
if (reply.reload === 'yes') {
$('#mydiv').html(reply.html);
}
});
Above, we send the whole kit and kaboodle to load in the DIV. It's a waste of bandwidth, and it forces the client to always load the same HTML unless you send some code or analyze the User-Agent to tell clients apart.
What is to be displayed in that DIV? You could use Handlebars to populate a template. Say it's just time, date and the new vericode:
if ($current_vericode == $new_vericode) {
$reply = [ 'refresh' => 'no' ];
} else {
$reply = [ 'refresh' => 'yes', 'time' => date('H:i:s'), 'auth' => $vericode ];
}
and in jQuery (Handlebars would be lots better, even if it's overkill for a little DIV):
$('#mydiv').empty().append(
$('<p>').text(reply.time)
).append(
$('<p>').text('New authcode: ' + reply.vericode)
);
Here is what I ended up doing:
$i = 1;
var auto_refresh = setInterval(function() {
$.get("data.php?user_id=3", function(data) {
//condition of data
if (data != $i) {
$('#gantt').load('dash_includes/dash_display_gantt.php').fadeIn("slow");
$('#all_bookings_div').load('dash_includes/dash_display_all_bookings.php').fadeIn("slow");
$('#secondary-sidebar').load('dash_includes/secondary_sidebar.php').fadeIn("slow");
$i = data;
}
});
}, 5000);
so on data.php it echos a date time. When ever I need the divs refreshed, I update the datetime. Every 5000 milliseconds it will check to see if the datetime has changed, and if so it'll refresh the divs and save that datetime as $i. If the datetime hasn't changed or is before $i then it won't do anything.
Thanks for all your help.