Reload or Refresh a Page after Ajax Success using jQuery

Last updated: 21st February 2025

The location.reload() method is a versatile tool in web development, allowing you to refresh an entire web page or just specific content within an element. This method can be triggered explicitly with a button click or automatically, providing flexibility in how you manage page updates. Integrate the .reload() method within an Ajax success callback function to seamlessly refresh content after data is retrieved, enhancing user experience. In this guide, we'll show you how simple and efficient it is to use the location.reload() method in your projects.

jQuery .reload Method()

The .reload() method, is one of the many methods (like the .replace() method) of the location object. The location object contains information about a URL (see the URL of this page in the browser’s address bar).

The .reload() takes a boolean value forceGet as parameter. So, it can be either …

location.reload(true); // the value "true" ensures that the current page is fully loaded ignoring the "cache".

location.reload(false);

Now, lets add the method inside our Ajax success function and see how it works.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <p>Refresh page 7 seconds after Ajax success.</p>

    <!--fill DIV with data after a successful Ajax call-->
    <div id='books'></div>
</body>

<script>
    $(document).ready(function () {
        $('#books').empty();

        $.ajax({
            type: 'GET',
            url: 'https://www.encodedna.com/library/library.xml',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find('List').each(function () {
                  $('#books').append(
                    $('<div>').text($(this).find('BookName').text())
                  );
                });

                // Success. Now reload the page again after 7 seconds.
                setInterval(function() {
                    location.reload(true);
                }, 7000);
            }
        });
    });
</script>
</html>

Try it

The location.reload() method, will reload (or refresh) an entire web page after the Ajax has performed its operation, that is, extracted data from an xml file. Therefore, I have added location.reload() inside the "success" callback function.

In addition, I have used the setInterval() method to set a delay of 7 seconds to do the reload process. This is optional however. You can call the reload without any delay.

If you are using setInterval() method in your example, you can also do this …

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'https://www.encodedna.com/library/library.xml',
        dataType: 'xml',
        success: function (xml) {
            // refresh this page every 5 seconds after successful AJAX request.
            setInterval(refreshPage, 5000);
        }
    });
});

// Define the refresh page.
function refreshPage() {
    location.reload(true);
}

Note: You should define the "refreshPage()" function outside "$(document).ready()" function.

← PreviousNext →