Question

I have something along the lines of:

By default all these panels are empty. But user actions can populate the panels, and users can switch between panels.

The problem I have right now is that switching between panels keeps refreshing the content from the server, even when it’s already been loaded, which is a slow UI experience.

I was thinking of appending a timestamp to each of the panel divs:

<div id="panel-1" timestamp="13123131313"></div>

And then using that timestamp to determine if I should rehit the server, if it’s under a minute don’t, if over a minute refresh the content.

What I’m looking for:

1. Your thoughts on this?
2. Where can I safely store the time stamp?
3. Suggestions for doing the timestamp comparison. Any simple jQuery solutions?

Thanks for helping me think this one through.

Answer 1

You could accomplish this easily—with valid markup—using jQuery’s .data() method.

Something akin to this:

// store timestamp on initial ajax load
var timestamp = new Date().getTime();
$('#panel-1').data('timestamp', timestamp);

// How to retrieve last timestamp
var last_stamp = $('#panel-1').data('timestamp');

// Example of comparing timestamps and setting a new one
var new_timestamp = new Date().getTime(),
    last_stamp = $('#panel-1').data('timestamp');
if (new_timestamp - last_stamp >= 60000) {
    $.ajax({
        /* ajax options */
        success: function() {
            var timestamp = new Date().getTime();
            $('#panel-1').data('timestamp', timestamp);
        }
    });
}