How do I refresh a page using JavaScript?
-
33Since jQuery is a javascript framework for easy DOM-manipulation and event-binding, I would recommend you to ask for javascript instead of jQuery.– ˈvɔləAug 4, 2014 at 13:56
-
22You don't need jQuery for this.– StardustJan 1, 2016 at 17:59
-
22More relevant than ever: needsmorejquery.com– Kartik ChughAug 11, 2017 at 3:55
-
2@Stardust You don't need jQuery for anything which you do with jQuery because of everything possible with JavaScript if you can do it jQuery.– I am the Most Stupid PersonJul 19, 2019 at 4:42
32 Answers
Use location.reload()
.
For example, to reload whenever an element with id="something"
is clicked:
$('#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.
-
33This didn't work for me. This worked though: window.location.href=window.location.href;– YsterDec 8, 2015 at 9:20
-
6This didn't work for me.
window.location.href=window.location.href;
andlocation.href=location.href;
worked.– twharmonOct 6, 2016 at 6:40 -
28
window.location.reload(true);
will hard refresh, otherwise by default it's false Apr 25, 2017 at 6:39 -
Just run
window.location.reload()
!– user9258013Jan 26, 2019 at 15:00 -
4@FaridAbbas
location.reload();
is standard javascript. You don't need jQuery for it. Jan 2, 2020 at 17:06
There are multiple unlimited ways to refresh a page with JavaScript:
location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
location.reload(false)
If we needed to pull the document from the web-server again (such as where the document contents change dynamically) we would pass the argument as
true
.
You can continue the list being creative:
window.location = window.location
window.self.window.self.window.window.location = window.location
- ...and other 534 ways
var methods = [
"location.reload()",
"history.go(0)",
"location.href = location.href",
"location.href = location.pathname",
"location.replace(location.pathname)",
"location.reload(false)"
];
var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
(function(cMethod) {
$body.append($("<button>", {
text: cMethod
}).on("click", function() {
eval(cMethod); // don't blame me for using eval
}));
})(methods[i]);
}
button {
background: #2ecc71;
border: 0;
color: white;
font-weight: bold;
font-family: "Monaco", monospace;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.5s ease;
margin: 2px;
}
button:hover {
background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-
11+1 for the list and jsfiddle. I have a question, in jsfiddle 1 and 6 make the generated page to disappear for a moment as it being reloaded, and 2-5 make page reload being "unnoticeable". In dev tool in chrome I can see the page being regenerated, but could you explain the redrawing process being defferent? please. Thank you in advance.– CԃաԃJun 25, 2013 at 7:21
-
@Cԃաԃ I see no difference... Maybe the cache is the issue? I will take a look soon. Jul 9, 2013 at 15:22
-
21 and 6
(reload()/(false))
are slower. hmmm. interesting. :) and 1 and 6 are the same asreload()
's default parameter isfalse
.– CԃաԃJul 19, 2013 at 0:32 -
1
location.href = location.href
is what I usually use, but thanks for the others. Very useful! +1 Dec 25, 2013 at 16:10 -
1
This works on all browsers:
location.reload();
-
If you're wondering how well supported this is exactly, here's the Can I use?– A FriendOct 1, 2020 at 16:53
Lots of ways will work, I suppose:
window.location.reload();
history.go(0);
window.location.href=window.location.href;
-
42This
window.location.href=window.location.href;
will do nothing if your URL has a #/hashbang on the endexample.com/something#blah
:– AaronLSJun 12, 2013 at 16:01 -
18In case anyone's wondering what the difference between
location.reload()
andhistory.go(0)
is: there is none. The relevant section of the HTML 5 spec at w3.org/TR/html5/browsers.html#dom-history-go explicitly dictates that they are equivalent: "When thego(delta)
method is invoked, if the argument to the method was omitted or has the value zero, the user agent must act as if thelocation.reload()
method was called instead." Oct 19, 2015 at 20:49 -
The only one that worked for me was this one: window.location.href=window.location.href;– YsterDec 8, 2015 at 9:10
-
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.
Edit: Unfortunately, I'll have to take down this answer very soon because, the question has changed and the user seemed to not be very clear on what they were asking. Some users have commented that refreshing is different from reloading a page; See the revisions to this question [https://stackoverflow.com/posts/5404839/revisions] As far as I can tell, from the original question which was around refreshing a page with AJAX which is ASYNCHRONOUS ..., refreshing a page should imply getting new and updated content to the page. Anyway, this answer will soon go away./
-
72Downvoting. This does not really answer the question, but instead shows how to replace the page's HTML with an Ajax response. That's different from reloading the page: for example, I'm working with a situation right now where this would not work to solve the original problem. Sep 29, 2012 at 1:39
-
6One trouble with reloading the entire HTML like this is having to manually call onload/ready events and mitigate the the overwriting of previously declared variables whose state you may wish to retain after the refresh.– PassKitMar 14, 2013 at 7:41
-
3Unless you're very careful with your code this will lead to memory leaks where you've attached event handlers and such without detaching them before replacing the code they're attached to. Sep 6, 2013 at 21:25
-
I'm using this to reload our dashboard every second, zero flicker! It's the poor man's comet/json api. Thanks to @DanielLlewellyn et al. for warnings. Feb 13, 2014 at 17:38
-
5A few people have commented that this approach is useful to refresh only a portion of the page. It isn't. I think those people are misunderstanding the
context
parameter of$.ajax
and expecting it to somehow perform some kind of magic. All it does is set thethis
value of callback functions. Ajax to a URL of""
will hit the URL you're currently on, thereby ordinarily loading the complete HTML (including<html>
and<head>
and<body>
), and nothing in this answer filters out the stuff you don't want. Oct 19, 2015 at 21:20
If the current page was loaded by a POST request, you may want to use
window.location = window.location.pathname;
instead of
window.location.reload();
because window.location.reload()
will prompt for confirmation if called on a page that was loaded by a POST request.
-
13This will lose the querystring however, whereas window.location = window.location will not– mrmillsyNov 15, 2013 at 15:08
-
1@mrmillsy
window.location = window.location
is also imperfect, however; it does nothing if there is a fragid (hashbang) in the current URL. Oct 19, 2015 at 21:30
The question should be,
How to refresh a page with JavaScript
window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another
You're spoiled for choice.
You may want to use
location.reload(forceGet)
forceGet
is a boolean and optional.
The default is false which reloads the page from the cache.
Set this parameter to true if you want to force the browser to get the page from the server to get rid of the cache as well.
Or just
location.reload()
if you want quick and easy with caching.
Three approaches with different cache-related behaviours:
location.reload(true)
In browsers that implement the
forcedReload
parameter oflocation.reload()
, reloads by fetching a fresh copy of the page and all of its resources (scripts, stylesheets, images, etc.). Will not serve any resources from the cache - gets fresh copies from the server without sending anyif-modified-since
orif-none-match
headers in the request.Equivalent to the user doing a "hard reload" in browsers where that's possible.
Note that passing
true
tolocation.reload()
is supported in Firefox (see MDN) and Internet Explorer (see MSDN) but is not supported universally and is not part of the W3 HTML 5 spec, nor the W3 draft HTML 5.1 spec, nor the WHATWG HTML Living Standard.In unsupporting browsers, like Google Chrome,
location.reload(true)
behaves the same aslocation.reload()
.location.reload()
orlocation.reload(false)
Reloads the page, fetching a fresh, non-cached copy of the page HTML itself, and performing RFC 7234 revalidation requests for any resources (like scripts) that the browser has cached, even if they are fresh are RFC 7234 permits the browser to serve them without revalidation.
Exactly how the browser should utilise its cache when performing a
location.reload()
call isn't specified or documented as far as I can tell; I determined the behaviour above by experimentation.This is equivalent to the user simply pressing the "refresh" button in their browser.
location = location
(or infinitely many other possible techniques that involve assigning tolocation
or to its properties)Only works if the page's URL doesn't contain a fragid/hashbang!
Reloads the page without refetching or revalidating any fresh resources from the cache. If the page's HTML itself is fresh, this will reload the page without performing any HTTP requests at all.
This is equivalent (from a caching perspective) to the user opening the page in a new tab.
However, if the page's URL contains a hash, this will have no effect.
Again, the caching behaviour here is unspecified as far as I know; I determined it by testing.
So, in summary, you want to use:
location = location
for maximum use of the cache, as long as the page doesn't have a hash in its URL, in which case this won't worklocation.reload(true)
to fetch new copies of all resources without revalidating (although it's not universally supported and will behave no differently tolocation.reload()
in some browsers, like Chrome)location.reload()
to faithfully reproduce the effect of the user clicking the 'refresh' button.
-
+1 for location = location; not many people seem to suggest it although it's shorter than most the answers provided, the only downside is it's readability I guess whereas location.reload() is a bit more semantic– branditoFeb 16, 2018 at 5:09
-
@Brandito More importantly,
location = location
doesn't work if there's a hash in the URL. For any site that uses fragids - or even for any site where somebody linking to a page might conceivably add a fragid to the URL - that makes it broken. Feb 16, 2018 at 15:12
window.location.reload()
will reload from the server and will load all your data, scripts, images, etc. again.
So if you just want to refresh the HTML, the window.location = document.URL
will return much quicker and with less traffic. But it will not reload the page if there is a hash (#) in the URL.
-
This behaviour is true in Chrome, at least -
location.reload()
forces revalidation of cached resources, even without arguments, whilewindow.location = document.URL
is happy to serve cached resources without hitting the server as long as they're fresh. Oct 20, 2015 at 3:53
The jQuery Load
function can also perform a page refresh:
$('body').load('views/file.html', function () {
$(this).fadeIn(5000);
});
-
4
As the question is generic, let's try to sum up possible solutions for the answer:
Simple plain JavaScript Solution:
The easiest way is a one line solution placed in an appropriate way:
location.reload();
What many people are missing here, because they hope to get some "points" is that the reload() function itself offers a Boolean as a parameter (details: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload).
The Location.reload() method reloads the resource from the current URL. Its optional unique parameter is a Boolean, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.
This means there are two ways:
Solution1: Force reloading the current page from the server
location.reload(true);
Solution2: Reloading from cache or server (based on browser and your config)
location.reload(false);
location.reload();
And if you want to combine it with jQuery an listening to an event, I would recommend using the ".on()" method instead of ".click" or other event wrappers, e.g. a more proper solution would be:
$('#reloadIt').on('eventXyZ', function() {
location.reload(true);
});
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:
- Using
$.ajax
directly like$.get('',function(data){$(document.body).html(data)})
causes css/js files to get cache-busted, even if you usecache: true
, that's why we useparseHTML
parseHTML
will NOT find abody
tag so your whole body needs to go in an extra div, I hope this nugget of knowledge helps you one day, you can guess how we chose the id for thatdiv
- Use
http-equiv="refresh"
just in case something goes wrong with javascript/server hiccup, then the page will STILL reload without you getting a phone call - This approach probably leaks memory somehow, the
http-equiv
refresh fixes that
I found
window.location.href = "";
or
window.location.href = null;
also makes a page refresh.
This makes it very much easier to reload the page removing any hash. This is very nice when I am using AngularJS in the iOS simulator, so that I don't have to rerun the app.
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>
You don't need anything from jQuery, to reload a page using pure JavaScript, just use reload function on location property like this:
window.location.reload();
By default, this will reload the page using the browser cache (if exists)...
If you'd like to do force reload the page, just pass a true value to reload method like below...
window.location.reload(true);
Also if you are already in window scope, you can get rid of window and do:
location.reload();
use
location.reload();
or
window.location.reload();
-
OP mentioned specifically "with jQuery" (even though as already noted by many, this maybe should not be a jQuery question) Feb 4, 2019 at 17:52
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>
<script>
$(document).on('click','#refresh',function(){
location.reload(true);
});
</script>
Use onclick="return location.reload();"
within the button tag.
<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
If you are using jQuery and want to refresh, then try adding your jQuery in a javascript function:
I wanted to hide an iframe from a page when clicking oh an h3
, for me it worked but I wasn't able to click the item that allowed me to view the iframe
to begin with unless I refreshed the browser manually...not ideal.
I tried the following:
var hide = () => {
$("#frame").hide();//jQuery
location.reload(true);//javascript
};
Mixing plain Jane javascript with your jQuery should work.
// code where hide (where location.reload was used)function was integrated, below
iFrameInsert = () => {
var file = `Fe1FVoW0Nt4`;
$("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
$("h3").enter code hereclick(hide);
}
// View Player
$("#id-to-be-clicked").click(iFrameInsert);
All the answers here are good. Since the question specifies about reloading the page with jquery, I just thought adding something more for future readers.
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
~ Wikipedia ~
So you'll understand that the foundation of jquery, or jquery is based on javascript. So going with pure javascript is way better when it comes to simple things.
But if you need a jquery solution, here's one.
$(location).attr('href', '');
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
You can write it in two ways. 1st is the standard way of reloading the page also called as simple refresh
location.reload(); //simple refresh
And another is called the hard refresh. Here you pass the boolean expression and set it to true. This will reload the page destroying the older cache and displaying the contents from scratch.
location.reload(true);//hard refresh
-
2Code-only answers are generally frowned upon on this site. Could you please edit your answer to include some comments or explanation of your code? Explanations should answer questions like: What does it do? How does it do it? Where does it go? How does it solve OP's problem? See: How to anwser. Thanks! Nov 8, 2019 at 1:48
you may need to use
location.reload()
or also may need to use
location.reload(forceGet)
forceGet
is a boolean and optional.
Set this parameter to true if you want to force the browser to take the page from the server to receive rid of the cache as well
Simple Javascript Solution:
location = location;
<button onClick="location = location;">Reload</button>
$(document).on("click", "#refresh_btn", function(event)
{
window.location.replace(window.location.href);
});
Y'all may need to use
location.reload(forceGet)
forceGet
is a boolean and optional.
The default is false, which reloads the page of the cache.