JS to combat cached page - javascript

I need a quick js code to reload the page if it is cached. I need this too show changes to the page without having to refresh the page to make the changes appear. Thanks!!

You can force a non-cached reload in this way:
window.location.reload(true);

Related

Redirect user and always ensure full page load/reload

If I am on the page http://mywebsite.com/contact and I do:
window.location.assign('http://mywebsite.com/contact#foo');
The page doesn't refresh and I understand thats desired. But I want to refresh/reload the page (to update the users cache). Is there a Javascript or JQuery function that I can use that will change the url and always reload/refresh the page?
Usecase
When a user clicks any anchor html element, my function checks if the page has been reloaded/loaded within the last 24 hours. If it hasn't I will call my javascript function above to ensure the user navigates to their desired page but also reloads the whole page to ensure they are working with the latest version of the Single Page Application.
Just put window.location.reload(true); after window.location.assign()
window.location.reload(true) will reload the page from the server.
window.location.reload(false) will reload from cache, if available.

How to refresh single page application with JavaScript?

I have a single page application, and I want to reload, but whenever I run window.location.reload(true);, it refreshes to the homepage. For example, if I run it from www.mywebsite.com/test/1, it will open www.mywebsite.com, I simply want it to refresh to www.mywebsite.com/test/1, and I want it to happen from server, not from cache. Any ideas how to do it with pure JS?
Try
window.location = 'www.mywebsite.com/test/1'
It will still reload the page, but as long as your JS redraws based on the URL it should work.
IMHO a single page app should never call reload. You just draw and clear elements on the page.
Have you tried simple location.reload() ?

Javascript refresh page automatically

I have an HTML page. Everytime I add new content to the page, the user needs to refresh the page in order to see the new content.
What I want to do is to refresh the page automatically for them regardless of browser.
I tried putting the following but the screen flickers so many times that it does not prove to be useful:
<script type="text/javascript">
location.reload();
</script>
The JavaScript you show there does indeed reload the page. Every single time the page loads, as soon as it reaches that JavaScript. The flickering you're seeing is probably the fact that it in an infinite cycle of reloading. What you need to do is perform an AJAX request to the server to find out if there is new content, and then reload the page if there is. Or, alternatively, use the AJAX to actually update the new content on the page.

Getting different browser behavior when reloading from browser reload button and reloading from javascript

I'm having a performance issue on my web application when the user hits the "refresh" button on my webpages. The behavior is shown below:
$("#reloadbutton").click(function(){
location.reload();
});
It reloads all of the CSS, JS, and image files that the page needs, as it should. The only problem is that it does this for every other page request, such as clicking on a link to go to another page.
If I just hit the F5 button, it'll reload all of the CSS, JS, and image files, and then if I go to another page, it won't try and reload those files once I go to that other page. But if I hit the reload button on the page itself, it'll reload all of those files on every page request, and I don't want it to do that.
So I have a two part question:
How can I refresh without having the browser fetch all of the CSS, JS, and image files (because I want to minimize the time it takes to refresh each page)?
Why am I getting different behavior when using location.reload() as opposed to using the browser's own reload button?
Note: I'm currently using the latest version of Firefox
use the
$("#reloadbutton").live("click",function(){
location.reload();
});
and you can do this by making ajax call after every some second
$("#reloadbutton").click(function(){
location.reload(false);
});
As per the Mozilla developer network, location.reload(); can take a parameter. When it is true, location.reload(true);, it causes the page to always be reloaded from the server. If it is false, location.reload(false);, or not specified, the browser may reload the page from its cache.

Back Button and Refresh with AJAX

I need a solution for the page refresh and the back button when using AJAX.
I'm using simple javascript for the AJAX implementation.
If anybody could send a code snippet I would be very grateful.
If you're using jQuery, there's the history plugin.
Here's a solution that I've used in some of my pages. Add this to pages that changes are made at.
window.onbeforeunload = function() {
window.name = "reloader";
}
this triggers when you leave those pages. You can also trigger it if there were changes made. So that it won't unnecessarily reload the page that needs reloading.
Then on pages that you want to get reloaded on after a the browser "back" use.
if (window.name == "reloader") {
window.name = "no";
location.reload();
}
this will trigger a reload on the page you need reloading to.
essentially, you need to use & monitor the hash portion of the url...
http://.../path?parms#hashpart
Whan you change the hash, iirc window.location.hash , it won't reload the page, but your ajax can monitor, and respond to it.
The onbeforeunload event can be useful to guard against refreshing but it fires if you navigate away or refresh. If you require that users login to the app you can always show a generic message advising against navigating away and refreshing. If users click your app log out button set a var to disable the warning. Could probably also make a 'Close' button that does the same thing.
Try PathJS it does not require jQuery or any other additional lib.

Categories