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.