1

I want to update a webpage periodically and I want the browser only to update if the page is available. Right nov I'm using using this:

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        setInterval("location.reload()", 66000);
    });   
</script>

Is it possible not to update if the page for some reason isn't available?

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
user1950067
  • 33
  • 5

2 Answers2

3

You could use an ajax check for a tiny resource ahead of time, something like:

$(document).ready(function() {
    setInterval(maybeRefresh, 66000);

    function maybeRefresh() {
        $.ajax({
            url:     "/path/to/tiny/resource",
            type:    "GET",
            success: function() {
                // That worked, do the full refresh
                location.reload();
            }
        });
    }
});

...but I would tend to think you'd be better off just loading the updated content instead. Put all of the primary content in an element with the id "main", then:

$(document).ready(function() {
    setInterval(function() {
        $("#main").load("/path/to/new/content");
    }, 66000);
});

That replaces the content of the #main element with the content received from the GET to /path/to/new/content. If the GET fails, no update.

I would probably also use a chained setTimeout instead of a setInterval and handle errors by trying to refresh more aggressively. Something like:

$(document).ready(function() {
    setTimeout(refresh, 66000);

    function refresh() {
        $.ajax({
            url: "/path/to/new/content",
            type: "GET",
            success: function(html) {
                // Success, update the content
                $("#main").html(html);

                // Reload in 66 seconds
                setTimeout(refresh, 66000);
            },
            error: function() {
                // Failed, try again in five seconds
                setTimeout(refresh, 5000);
            }
        });
    }
});
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I'm trying to update a RSS feed. Guess there will not be a lot of updated data. So maybe it will be okay to download all of it? – user1950067 Jan 15 '13 at 22:42
  • @user1950067: Up to you! You know a lot more about what you're doing than I do. :-) But yeah, it's a rare RSS feed that changes *hugely* in 66 seconds. If that's what you're doing, I'd lean toward that last example. No unnecessary `GET` operations, smooth from the user's perspective, you can even apply effects when updating `#main`... – T.J. Crowder Jan 15 '13 at 22:45
  • I'm not shure I know a lot more about what I'm doing than you - it's mostly trial and error for my part :-) Thanx for your help - I'll accept your answer – user1950067 Jan 15 '13 at 22:59
0

You may want to use the HTML5 cache manifest feature. In order to do that, specify a manifest file path in your html element's manifest attribute:

<!DOCTYPE HTML>
<html manifest="cache.manifest">

Then add all the website's resources to the manifest file, e.g.:

CACHE MANIFEST
# v11
/index.html
/main/features.js
/main/settings/index.css
http://example.com/images/scene.jpg
http://example.com/images/world.jpg

Now, if you do a GET request for index.html, the browser will only do an actual request if the cache manifest file is available and it has changed (in order to force an update you can store a version number in cache manifest comment and update it when needed). Otherwise, the page will be reloaded from browser's cache.

ohaleck
  • 661
  • 4
  • 20