jQuery automatic refresh or reload a page; Through this tutorial, i am going to show you how to automatically reload or refresh page using jQuery with set interval time like after 5,10,20,50,60 etc seconds.
Sometimes, you need to automatically refresh or reload the web page. So, this tutorial, i will show you how to automatically refresh or reload a web page using jQuery with setimeout, settimeinterval and HTML meta methods.
How to refresh or reload a page automatically in jQuery
There are three methods available in jQuery to reload page or refresh page; as shown below:
- Method 1 – jQuery Refresh or Reload a Page using SetTimeOut
- Method 2 – jQueryRefresh or Reload a Page using setInterval
- Method 3 -jQuery Refresh or Reload a Page using Meta Data Tag
Method 1 – jQuery Refresh or Reload a Page using SetTimeOut
See the following example for how to refresh or reload web page using jQuery setTimeout method. As shown below:
<head>
<title>Jquery Page Reload after 10 seconds - Laratutorials.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>Hello, I am Laratutorials.com</h2>
<script type="text/javascript">
setTimeout(function(){
location.reload();
},15000);
</script>
</body>
</html>
Method 2 – jQueryRefresh or Reload a Page using setInterval
See the following example for how to refresh or reload web page using jQuery setInterval method. As shown below:
<html lang="en">
<head>
<title>Page Reload after 10 seconds - Laratutorials.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>Hello, I am Laratutorials.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 a Page using Meta Data Tag
See the following example for you will learn how to refresh or reload web page using meta. As shown below:
<html lang="en">
<head>
<title>Page Reload after 10 seconds - Laratutorials.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 Laratutorials.com</h2>
</body>
</html>
