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

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

Sometimes, We need to manually reload a web page from a javascript. Since jquery is a javascript framework. It can do easily from this.

Reloading or refreshing a page involves retrieving data and asserts from either from cache or server. Asserts are javascript, HTML, and style from a server.

There are two types of reloading a current page.

  • Cache refresh: reloading a current page to get the data from a cache
  • hard refresh: reload page retrieves the data from a server

Javascript to reload a web page

In javascript, you can refresh the page using the below lines of code

location.reload(parameter);

the default parameter is false which loads the page from a cache.

true: force reload of a web page and It gets all assets such as styles, js, and HTML from a server, and clears a cache.

Here is a code Reload a page from a cache

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

Here is a code to force Reload a page from a server

location.reload(true);

or you can also use window global object as seen below

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

Reload a page using the button click event

Sometimes, We want to reload a page using a button click event.

To reload from a cache, use the below 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>

Use Jquery to reload a page on click button

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

use history to refresh a page

go() function in history provides an option to reload a page.

Here is an example html and javascript code to reload a current on button click event.

<button type="button" onclick="refresh();">Reload</button>
<script type="text/javascript">

function refresh(){
 history.go()

}
</script>

Another way to use window.location.href

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

How to Refresh the current page in ajax success callback

Sometimes, We want to reload a page after an AJAX request is successfully received.

Here is a code to make a post request using AJAX.

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

Success callback called for response is 200 code.

reload logic is placed inside a success callback that reloads the entire page.

It helps display up-to-date CRUD operations.