I have an app that has a status screen that is meant to be displayed at all times in various places around the organization. There are probably 50 different users inputting different pieces of data into it, and the status screen updates every 10 seconds with the new information. It's pretty much a tracking board for widgets flowing through a process.
Currently, I do a refresh every 10 seconds which empties all the divs and then loops through the active widgets and places them where every they should go and color codes based on status and stuff like that. However, there's a fraction of a second of a blink from when the javascript empties the divs and when they repopulate, and it's pretty annoying honestly.
My question is how to best update the status screen where there is no blink and things just empty out and pop in as needed.
My thinking at first is there a way to "freeze" the screen for 2 seconds and let it rewrite in the background then unfreeze so there isn't a blink.
OR, which would be MUCH MUCH MUCH cooler, is that some how I only update pieces that get updated within the 10 second intervals. So if a widget goes from staging area to molding, it fades out of staging and fades into molding and none of the other divs are touched. This would be cool because I could add some animations this way. However, I'm not sure how to "efficiently" do this. Maybe I have an "active array" that stores how everything is, and then the AJAX pulls a new array and executes changes where the two doesn't match?
Anyway, I'd like to know if there's a screen freeze, update in the background answer and if there's an like the second one described.
Sorry for the novel =(
This blink or flashing effect is consequence of the asynchronous behavior of ajax.
what is happening is that your divs are emptying, but your new data is not yet ready to fill them.
the solution is to house your divs' emptying and refilling in a callback that is passed to the successful completion of your ajax request.
I think a lot of your problem comes when you clear all the data out before repopulating it.
You could try two methods for fixing this.
Solution 1 Build a string of html when you get your new results back. Do this in a loop, adding to the string variable each time and then replace the html of a "wrapper" div with the new html. You could make it fancy and do a fade in/fade out too.
var htmlString = '';
for(var i=0; i < jsonReturn.length; i++)
{
htmlString += "<p>" + jsonReturn[i].data + "</p>";
}
$('#wrapper-div").empty().append(htmlString);
Solution 2 Give your html id's that are based on an id value from the data you're repopulating. This will be considerably more complicated but it would let you update single items in your display individually or only if they change.
<p id="data-spot-<?php echo $data['id']; ?>">Some display data</p>
Then in your javascript you would do
for(var i=0; i < jsonReturn.length; i++)
{
$('#data-spot"+jsonReturn.id).empty().append("Some html string or data");
}