How to refresh or reload a page automatically in jQuery

Here in this tutorial, you will be learning two different methods for refreshing or reloading a page.

In the first method, I’ll use a button control and its click event to trigger the page refresh. This is a manual process.

In the second method, I’ll use a timer to trigger refreshing or reloading a page. This is an automatic process.

To achieve this I am using the location.reload() method inside the $(document).ready() function. I have written scripts one each for manual process and for automatic process.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Refresh or Reload a Page Using jQuery</title>
</head>
<body>

    <div class="container">

        <h4>Click the Button to refresh the page using jquery</h4>
        <button id="myButton">Click Me</button>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {

            $("#myButton").click(function() {  

                location.reload(true);

            });

        });
    </script>

</body>
</html>

In the second example, We are using the SetInterval() method to call the .reload() function using jquery.

How to reload page after some time in jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Refresh or Reload a Page Using jQuery</title>
</head>
<body>

    <div class="container">

        <h4>When you open your web page after 5 seconds it will refresh your page.</h4>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {

            setInterval( function() { location.reload() }, 5000 );

        });
    </script>

</body>
</html>

Thanks forr reading.