Automatically Refresh or Reload a Page using jQuery

June 17, 2022June 17, 2022 Rabiya 0 Comments

In this section, we are going to learn reload and refresh the page automatically. We will use jQuery to do this. We can reload or refresh the embedded page or active page either manually or automatically with the help of jQuery. If we are developing a web page and we want to add auto-refresh after some time period, we can do it by using JavaScript. We can use setTimeout(), meta http-equiv tag, and setInterval() to auto-reload of a page. There are various technologies such as Codeigniter,Net,PHP,Laravel, Java to automatically reload or refresh a web page.

Sometimes, when we work on a page, we need to reload the page after some period, and that time period can be 10 seconds, 15 seconds, 20 seconds, 30 seconds, etc. In our below example, we will describe the various processes to refresh the HTML page. This section will provide 3 examples to automatically reload a PHP page using some method and refresh the PHP page using JavaScript. If we want to refresh the page manually, we can also do it by specifying some time intervals.

How to Automatically Refresh Or Reload Web Page in jQuery

There are simple three methods to reload or refresh page using jquery; as shown below:

Method 1 – jQuery Refresh or Reload Page using Settimeout

Now, you will learn how to refresh or reload web page using jQuery setTimeout method. See the following example:

<head>
    <title>Jquery Page Reload after 10 seconds - CodeOne.com</title>  
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>Hello, I am CodeOne.com</h2>
    <script type="text/javascript">
        setTimeout(function(){
            location.reload();
        },15000);
    </script>
</body>
</html>

Method 2 – jQuery Refresh or Reload Page using setInterval

Now, you will learn how to refresh or reload web page using jQuery setInterval method. See the following example:

<html lang="en">
<head>
    <title>Page Reload after 10 seconds - CodeOne.com</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>Hello, I am CodeOne.com</h2>
    <script type="text/javascript">
        function autoRefreshPage()
        {
            window.location = window.location.href;
        }
        setInterval('autoRefreshPage()', 15000);
    </script>
</body>
</html>

Method 3 – jQuery Refresh or Reload Page using meta data

Now, you will learn how to refresh or reload web page using meta. See the following example:

<html lang="en">
<head>
    <title>Page Reload after 10 seconds - CodeOne.com</title>  
    <meta http-equiv="refresh" content="10" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>Hello, I am CodeOne.com</h2>
</body>
</html>