Reading Time: 3 minutes

1,522 Views

Inside this article you will see the concept i.e Automatically Refresh or Reload a Page In jQuery. Article contains the classified information about automatic refreshing a page after a specific time in jquery.

We use the concept of automatically page reload where we are giving live updates to user. For example – Cricket Live Scores, Live Breaking News websites, etc. Sometimes, we require to reload page after every 5 seconds, 10 seconds, 15 seconds, 20 seconds, 25 seconds, 30 seconds etc. This concept will help to implement these.

In jQuery we have multiple options to reload a page. We will see three options from it. Topic is very interesting to learn and also easy to implement.

Learn More –

Let’s get started.

jQuery Automatic Page Reload

We will see these following concepts to reload a page automatically –

Using setTimeout()
Using setInterval()
Using Meta Tag

Using setTimeout()

Create a file index.html. Open file and write this code into it.

<html lang="en">

<head>
    <title>Page Reload after 15 seconds - Online Web Tutor</title>  
</head>

<body>
    <h2>Hello, I am sample page which will reload in 15 seconds</h2>
    
    <script type="text/javascript">
        setTimeout(function(){
            location.reload();
        },15000); // 15000 milliseconds = 15 seconds
    </script>
    
</body>
</html>

Using setInterval()

Create a file index.html. Open file and write this code into it.

<html lang="en">

<head>
    <title>Page Reload after 15 seconds - Online Web Tutor</title>
</head>

<body>
    <h2>Hello, I am a sample page. I will reload myself after 15 seconds</h2>
    <script type="text/javascript">
        function autoRefreshPage(){

            window.location = window.location.href;
        }
        setInterval('autoRefreshPage()', 15000); // 15 seconds
    </script>

</body>

</html>

Using Meta Tag

Create a file index.html. Open file and write this code into it.

<html lang="en">
<head>
    <title>Page Reload after 15 seconds - Online Web Tutor</title>  
    <meta http-equiv="refresh" content="15" />
</head>

<body>

    <h2>Hello, I am sample page. I will reload after 15 seconds.</h2>

</body>
</html>

We hope this article helped you to learn Automatically Refresh or Reload a Page Using jQuery Tutorial in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.