Open In App

How to refresh a page using jQuery?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In jQuery, you can use simple methods to refresh a page, ensuring that the current content is reloaded for a fresh experience. we have some common methods to refresh our page.

Here are several Approaches

Using the location.reload()

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:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>
 
    <script src=
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                location.reload(true);
                alert('Reloading Page');
            });
        });
    </script>
</head>
 
<body>
    <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 type="button">
            Button to Reload page
        </button>
    </center>
 
</body>
 
</html>


Output:

jQuery-100

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:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>
 
    <script src=
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                history.go(0);
                alert('Reloading Page');
            });
        });
    </script>
</head>
 
<body>
    <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 type="button">
            Button to Reload page
        </button>
    </center>
 
</body>
 
</html>


Output:

jQuery-101

Using location.replace() with the 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:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to refresh a page
        using jQuery?
    </title>
 
    <script src=
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                location.replace(location.pathname);
                alert('Reloading Page');
            });
        });
    </script>
</head>
 
<body>
    <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 type="button">
            Button to Reload page
        </button>
    </center>
 
</body>
 
</html>


Output:

jQuery-102

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.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads