How to refresh or reload a page automatically in jQuery

Some times we need to refresh or reload an active web page or the web pages that we embed inside the parent page. The active page or the embedded pages can be refreshed either manually or automatically. I'll how you can refresh or reload a web page automatically at a given interval using jQuery

Here in this article I am going to show two different methods for refreshing or reloading a page.
In the first method, I’ll use a button control and its click event to trigger the page refresh. This is a manual process.

👉 By the way, you can do this (reload a page automatically) using plain old JavaScript.

In the second method, I’ll use a timer to trigger refreshing or reloading a page. This is an automatic process.

See this demo

To achieve this I am using the location.reload() method inside the $(document).ready() function. I have written scripts one each for manual process and for automatic process.

Method location.reload() accepts a Boolean value forceGet, which can be either true or false. Setting location.reload(true); ensures that the current page is fully loaded ignoring the cache.

The jQuery $(document).ready(function() {}) ensures that the entire page is fully loaded before any event is handled.

👉 You may also like this... how to refresh or reload a page after an Ajax success using jQuery

Manually Refresh or Reload Page with Button Click

In the first method, the page will refresh or reload when a user clicks the button.

The Markup along with the Script

<html>
<head>
    <title>Refresh or Reload a Page Using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <div><input id="btReload" type="button" value="Reload Page" /></div>
</body>

<script>
    $(document).ready(function() {
        $('#btReload').click(function () {
            location.reload(true); 
        });    // Reload page on button click.
    });
</script>
</html>

Also Read: How to auto refresh page Every 10 seconds using JavaScript

Automatically Refresh or Reload Page using SetInterval() Method

In the second example, I am using the SetInterval() method to call the .reload() function.

<script>
    $(document).ready(function() {
        // Call refresh page function after 5000 milliseconds (or 5 seconds).
        setInterval('refreshPage()', 5000);
    });

    function refreshPage() { 
        location.reload(); 
    }
</script>

See this demo

Hope you find this article and its example useful. Thanks for reading. ☺

← PreviousNext →

How to refresh or reload a page automatically in jQuery

Tools you can use

Manually Refresh or Reload Page with Button Click

Automatically Refresh or Reload Page using SetInterval() Method