How to refresh or reload a page automatically in jQuery

jquery javascript

← PrevNext →

Tools you can use

Last updated: 11th March 2023

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

I have shared two different methods for "refreshing" (or reloading) a web page.

In the first method, I’ll use a "button" control and its click event to trigger page reload. This is a manual process.

👉   By the way, you can do this (reload a page automatically) using pure 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 do 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.

location.reload() method 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
Refresh page after ajax success

Manually Refresh (or reload) a Page with Button Click

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

The Markup and the Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

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

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

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

Automatically Refresh (or reload) a 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

The automatic Reloading of the page will be triggered using the setInterval() method. This method takes "two" parameters. The first parameter is a function, which has the code to refresh or reload the page. The second parameter is a time interval (5000 milliseconds), which will call the function repeatedly.

Related: How to refresh the contents in a <div> element withoug reloading the entire page.

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

Examples you don't want to miss.

🚀 Reload or Refresh a Page after Ajax Success using jQuery
🚀 How to auto refresh Page Every 10 Seconds using JavaScript setInterval() Method
🚀 How to create a simple CRUD application using only JavaScript

← PreviousNext →