Reload or Refresh a Page after AJAX Success using jQuery

Last updated: 31st July 2026

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 tutorial, I'll show you how simple and efficient it is to use the "location.reload()" method in your projects.

The .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);

👉 Important: location.reload(true) is now outdated. The true parameter was intended to force a cache refresh, but modern browsers generally ignore it. Therefore use,

location.reload()

instead.

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/3.3.1/jquery.min.js"></script>
    <p>Refresh page "7 seconds after AJAX success".</p>

    <div id='books'></div>      <!--fill DIV with data after a successful AJAX call-->
</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.
                setTimeout(function() {
                    location.reload(true); 
                    // Or, simply
                    // location.reload();   
                }, 7000);
            },
            error: function () {
                document.getElementById('msg').innerHTML = 'Unable to load the XML file.';
            }
        });
    });
</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 setTimeout() method to set a delay of 7 seconds to do the reload process. This is optional. You can call the reload without any delay.

Using setInterval() Method

You can also use the setInterval() method to perform a similar task. However, use it only when you need to execute a function repeatedly at a specific time interval. For example,

<script>
    $(document).ready(function () {

        let books = [];
        let startIndex = 0;

        // Load books from XML.
        $.ajax({
            type: 'GET',
            url: '../../library/library.xml',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find('List').each(function () {
                    books.push($(this).find('BookName').text());
                });

                showBooks();    // Show first 3 books.

                setInterval(showBooks, 5000);   // Repeat every 5 seconds.
            }
        });

        // Display 3 books at a time with animation.
        function showBooks() {
            $('#books').fadeOut(500, function () {
                $(this).empty();

                // Get the next 3 books.
                let currentBooks = books.slice(startIndex, startIndex + 3);

                $.each(currentBooks, function (index, book) {
                    $('#books').append(
                      $('<div>').text(book)
                    );
                });

                $(this).fadeIn(500);

                // Move to the next set of 3 books.
                startIndex += 3;

                // Start again from the first book when finished.
                if (startIndex >= books.length) {
                    startIndex = 0;
                }
            });
        }
    });
</script>

Try it

← PreviousNext →