Automatically Refresh or Reload a Page using jQuery Code Example

We’ll learn how to Automatically Refresh or Reload a Page using jQuery. With the aid of jQuery, we may reload or refresh the embedded or active website manually or automatically. If we’re creating a web page and want to include auto-refresh after a certain amount of time, we may accomplish it with JavaScript. To auto-reload a page, we may use setTimeout(), meta http-equiv tag, and setInterval(). To automatically reload or refresh a web page, many technologies such as Codeigniter,.Net, PHP, Laravel, and Java can be use.

When working on a page, we may need to refresh it after a certain amount of time, which might be 10 seconds, 15 seconds, 20 seconds, 30 seconds, or more. In the example below, we’ll go over the various methods for refreshing an HTML page. This section contains three examples of how to automatically reload a PHP page and refresh a PHP page using JavaScript. If we wish to manually refresh the website, we may do so by setting specific time intervals.

Example01 – Automatically Refresh or Reload a Page using setTimeout()

The setTimeout() function will be use in the first example to automatically reload and refresh a page. There are two arguments to the setTimeout() function. We’ll describe a function in the first argument that contains code for reloading and refreshing the page. We’ll describe the time interval after which the function is execute in the second argument. Milliseconds should be use as the time interval. This approach will only call the function once.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Page Reload after 10 seconds</title>  
</head>  
<body>  
  
<h2>Softhunt.net</h2>  
  
</body>  
  
<script type="text/javascript">  
   setTimeout(function(){  
       location.reload();  
   },10000);  
</script>  
</html>

Example02 – using setInterval()

The setInterval() function will be use in the second example to automatically reload and refresh a page. There are two arguments to the setInterval() function. We’ll describe a function in the first argument that contains code for reloading and refreshing the page. We’ll discuss the time interval in the second argument, which is use to call the function repeatedly. Milliseconds should be use as the time interval. Until clearInterval() is invoked or the window is closed, this method performs the function after the provided time interval. We’re not utilizing any methods to stop a function from running, which is mentioned in the setInterval() method. That is, the method continues to run the function until the window is close.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Page Reload after 10 seconds</title>  
</head>  
<body>  
  
<h2>Softhunt.net</h2>  
  
</body>  
  
<script type="text/javascript">  
    function autoRefreshPage()  
    {  
        windowwindow.location = window.location.href;  
    }  
    setInterval('autoRefreshPage()', 10000);  
</script>  
</html>  

Example03 – using http-equiv

In the third example, we’ll utilize Meta to reload and refresh a page automatically. We may set the time in seconds using the Meta tag. Then, at the set interval of time, we’ll target the page we want to refresh. We may utilize the URL to redirect a page to another page. We shall be reloaded on the same page if we do not give the URL.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Page Reload after 10 seconds</title>  
    <meta http-equiv="refresh" content="10" />  
</head>  
<body>  
  
<h2>Softhunt.net</h2>  
  
</body>  
</html>  

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn.

If you want to learn more about the jQuery and JavaScript programming language then click the link to see our last article on jQuery Smooth Scroll to ID with jQuery.

Leave a Comment