jQuery Reload or Refresh Page Automatically

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 - Tutsmake.com</title>  
    <script src="http://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 – 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 - Tutsmake.com</title>
    <script src="http://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 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 - Tutsmake.com</title>  
    <meta http-equiv="refresh" content="10" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>Hello, I am Tutsmake.com</h2>
</body>
</html>

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.