jQuery automatic refresh or reload a page; In this tutorial, you will learn how to automatically refresh or reload web page or html elements like div, span, and other tags using jQuery.
Sometimes, you need to automatically refresh or reloading the web page. So, this tutorial will guide you on how to automatically refresh or reload a web page using jQuery and HTML meta property.
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 - Tutsmake.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>Hello, I am Tutsmake.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 - Tutsmake.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>Hello, I am Tutsmake.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 - Tutsmake.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 Tutsmake.com</h2>
</body>
</html>
