Reading Time: 3 minutes

1,499 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.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

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.