Automatically Refresh or Reload a Page using jQuery or Reload a Page with a Button Click

Many a 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 or reloaded either manually or automatically 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.

See this demo

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

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.

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

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 using ...

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

← PreviousNext →



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: