How to Refresh or Reload a Webpage Automatically jQuery

Monday, November 11, 2013

How to Refresh or Reload a Webpage Automatically jQuery

It is quite a common thing for all of us to refresh or reload our webpages in our daily life. But generally we do refresh or reload our pages manually. Sometimes it is required for the page to get refreshed or reloaded automatically by itself. In case you have some live updates to be projected on your page it is required for that page to get reloaded automatically. For example the cricket scores get refreshed for every 10-15 seconds even if there is no change in the scoreboard.
To achieve this we can simply implement this in two ways.

Using HTML
Using jQuery

Using HTML:

<meta http-equiv="refresh" content="10">

The attribute http-equiv=”refresh” despite being a normal standard meta tag sends an HTTP command, which helps the page to get refreshed.
The content attribute holds a value in seconds which means that the page will be refreshed for every 20 seconds.

Using jQuery:

The following jQuery code reloads or refreshes the webpage automatically.

function reloadPage() {
    location.reload();
};
$(document).ready(function() {
    setTimeout("reloadPage()", 20000); 
});

location.reload() here refreshes the page for every 20000 ms.The main advantage of using location.reload() is it works for all major browsers.

Refresh page on button click:

If required you can also place a button to refresh the page on clicking.

$(document).ready(function () {
    $('#btn_Reload').click(function () {
        location.reload();
    });
});

Hence these are some of the many ways on how to refresh or reload a webpage automatically.
Hope this post helps you and please feel free to suggest and post your valuable comments.