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.