Reload Page 2 Times With Ajax / Javascript And Settimeout

I must admit I am not good with Ajax, Java script or CSS to be honest. Please go easy on me I need help. I am using a CMS that I wrapped in Jquery mobile and can't use meta refresh

Solution 1:

You need persistence to overcome the loop problem. This is because every time the page gets reloaded, the javascript in it is evaluated. Your page should "remember" that it has been reloaded. ...how? There are many ways. You could add a parameter to the query string, or save this data in a cookie or in the local storage. You could keep track of the reloads server-side. Every approach has its own pros and cons.

Here's a simple working solution, close to the one you are looking for, that uses the localStorage (old browsers don't support localStorage http://caniuse.com/#feat=namevalue-storage)

<scripttype="text/javascript">
    ;(function () {
        var reloads = [2000, 13000],
            storageKey = 'reloadIndex',
            reloadIndex = parseInt(localStorage.getItem(storageKey), 10) || 0;

        if (reloadIndex >= reloads.length || isNaN(reloadIndex)) {
            localStorage.removeItem(storageKey);
            return;
        }

        setTimeout(function(){
            window.location.reload();
        }, reloads[reloadIndex]);

        localStorage.setItem(storageKey, parseInt(reloadIndex, 10) + 1);
    }());
</script>

As you can see, I use an array that contains some kind of timeline. To keep things simple, every element of the array contains the number of milliseconts to to wait before changing the page since the last reload.