How to Refresh a Page using jQuery?

Last Updated : 08 Oct, 2024

Refreshing a page using jQuery allows you to programmatically reload the current webpage, ensuring updated content or resetting the page's state. It can be done using location.reload() method.

Table of Content

Using location.reload() Method
Using history.go(0)
Using location.replace() with Current Page

Refresh a Page using location.reload() Method

The location.reload() method reloads the current web page emulating the clicking of the refresh button on the browser. The optional true parameter passed to the method is used to force the page to load from the server and ignore the browser cache.

Syntax

location.reload(true)

Example: This example refreshing the web page on a button click. It display a message Reloading Page and then reloads the page.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>

    <script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to refresh a page
        using jQuery?
    </b>

    <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well,<br>
        written and explained computer science
        and programming articles, quizzes
        and interview questions.
    </p>

    <button>
        Button to Reload page
    </button>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                location.reload(true);
                alert('Reloading Page');
            });
        });
    </script>
</body>

</html>

Output

Refresh a Page using history.go(0)

The history.go() method loads a URL from the browser's history depending on the parameter passed to it. If the parameter passed is '0', it reloads the current page.

Syntax

history.go(0);

Example: In this example, we are using jQuery to refresh the page when a button is clicked. It triggers history.go(0) to reload the page and displays a Reloading Page alert.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>

    <script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to refresh a page
        using jQuery?
    </b>

    <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written <br> and explained computer
        science and programming articles,
        quizzes and interview questions.
    </p>

    <button>
        Button to Reload page
    </button>

    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                history.go(0);
                alert('Reloading Page');
            });
        });
    </script>
</body>

</html>

Output

Refresh a Page using location.replace() with Current Page

The location.replace() method can be used by passing the location.pathname as a parameter. The location.pathname returns the current url and passing that on to location.replace() reloads the current page.

Syntax

location.replace(location.pathname);

Example: In this example, we are using jQuery to refresh the page when a button is clicked by calling location.replace(location.pathname) and displays an alert saying Reloading Page.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>

    <script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to refresh a page
        using jQuery?
    </b>

    <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained <br>
        computer science and programming
        articles, quizzes and interview
        questions.
    </p>

    <button>
        Button to Reload page
    </button>

    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                location.replace(location.pathname);
                alert('Reloading Page');
            });
        });
    </script>
</body>

</html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.