How can I refresh a page with jQuery?
You can use JavaScript location.reload()
method.
This method accepts a boolean parameter. true
or false
. If the parameter is true
; the page always reloaded from the server. If it is false
; which is the default or with empty parameter browser reload the page from it's cache.
With true
parameter
<button type="button" onclick="location.reload(true);">Reload page</button>
With default
/ false
parameter
<button type="button" onclick="location.reload();">Reload page</button>
Using jquery
<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
$('#Reloadpage').click(function() {
location.reload();
});
</script>
Here are some lines of code you can use to reload the page using jQuery.
It uses the jQuery wrapper and extracts the native dom element.
Use this if you just want a jQuery feeling on your code and you don't care about speed/performance of the code.
Just pick from 1 to 10 that suits your needs or add some more based on the pattern and answers before this.
<script>
$(location)[0].reload(); //1
$(location).get(0).reload(); //2
$(window)[0].location.reload(); //3
$(window).get(0).location.reload(); //4
$(window)[0].$(location)[0].reload(); //5
$(window).get(0).$(location)[0].reload(); //6
$(window)[0].$(location).get(0).reload(); //7
$(window).get(0).$(location).get(0).reload(); //8
$(location)[0].href = ''; //9
$(location).get(0).href = ''; //10
//... and many other more just follow the pattern.
</script>
There are many ways to reload the current pages, but somehow using those approaches you can see page updated but not with few cache values will be there, so overcome that issue or if you wish to make hard requests then use the below code.
location.reload(true);
//Here, it will make a hard request or reload the current page and clear the cache as well.
location.reload(false); OR location.reload();
//It can be reload the page with cache
Use location.reload():
$('#something').click(function() {
location.reload();
});
The reload()
function takes an optional parameter that can be set to true
to force a reload from the server rather than the cache. The parameter defaults to false
, so by default the page may reload from the browser's cache.
To reload a page with jQuery, do:
$.ajax({
url: "",
context: document.body,
success: function(s,x){
$(this).html(s);
}
});
The approach here that I used was Ajax jQuery. I tested it on Chrome 13. Then I put the code in the handler that will trigger the reload. The URL is ""
, which means this page.
Here is a solution that asynchronously reloads a page using jQuery. It avoids the flicker caused by window.location = window.location
. This example shows a page that reloads continuously, as in a dashboard. It is battle-tested and is running on an information display TV in Times Square.
<!DOCTYPE html>
<html lang="en">
<head>
...
<meta http-equiv="refresh" content="300">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
function refresh() {
$.ajax({
url: "",
dataType: "text",
success: function(html) {
$('#fu').replaceWith($.parseHTML(html));
setTimeout(refresh,2000);
}
});
}
refresh();
</script>
</head>
<body>
<div id="fu">
...
</div>
</body>
</html>
Notes:
$.ajax
directly like $.get('',function(data){$(document.body).html(data)})
causes css/js files to get cache-busted, even if you use cache: true
, that's why we use parseHTML
div
http-equiv="refresh"
just in case something goes wrong with javascript/server hiccup, then the page will STILL reload without you getting a phone callhttp-equiv
refresh fixes that