How to refresh a current page in JQuery?| javascript refresh a page example

Occasionally, we may need to manually reload a web page from JavaScript. Fortunately, with jQuery, a JavaScript framework, this can be accomplished easily.

Reloading or refreshing a page typically involves retrieving assets such as JavaScript, HTML, and styles from either the browser cache or directly from the server.

There are two primary methods for reloading the current page.

• Cache Refresh: This involves reloading the current page to retrieve the data from the browser cache.
• Hard Refresh: This method reloads the page and fetches the data directly from the server.

#How to Reload a Web Page Using JavaScript

In JavaScript, you can refresh a web page using the following lines of code:

location.reload(parameter);

The default parameter is false, which loads the page from the cache.

Setting the parameter to true forces a reload of the web page. This fetches all assets such as styles, JavaScript, and HTML from the server and clears the cache.

Here’s how to reload a page from the cache:

location.reload();
location.reload(false);

And here’s how to force a reload from the server.

location.reload(true);

Alternatively, you can use the window global object as shown below:

window.location.reload(); // reload from a cache
window.location.reload(false); // reload from a cache
window.location.reload(true); // reload from a server

These methods provide flexibility in reloading web pages based on your specific requirements.

#Reloading a Page Using Button Click Event

Sometimes, you may need to reload a page with a button click event.

To reload from the cache, use the following code.

<button type="button" onclick="location.reload(false);">Refresh A page</button>

To reload from a server, use the below code

<button type="button" onclick="location.reload(true);">Refresh A page</button>

Alternatively, you can use jQuery to reload a page on button click.

<button type="button" id="refreshButton">Reload</button>
<script type="text/javascript">
    $('#refreshButton').click(function() {
        location.reload();
    });
</script>

These snippets allow you to implement page reloading functionality conveniently with button clicks, catering to different reloading requirements.

#Using History to Refresh a Page

The go() function in the history object provides an option to reload a page. Below is an example HTML and JavaScript code to reload the current page on a button click event.

<button type="button" onclick="refresh();">Reload</button>
<script type="text/javascript">
  function refresh() {
    history.go();
  }
</script>

Another method involves using window.location.href.

window.location.href = window.location.href;

#How to Refresh the Current Page in an AJAX Success Callback

Sometimes, you may need to reload a page after an AJAX request is successfully received.

Here’s a code example demonstrating how to make a POST request using AJAX and reload the page upon success.

$.ajax({
  url: "API URL",
  method: "POST",
  success: function (response, textStatus, xhr) {
    location.reload(true);
  },
});

In this example, the success callback is executed upon receiving a response with a status code of 200. The reload logic is placed inside the success callback, ensuring that the entire page is refreshed.

This is particularly useful for displaying up-to-date CRUD operations.