I use a Firefox plugin that can refresh the browser window every X seconds. As a frontend developer this is really useful as I can get instant feedback on CSS / XHTML changes the moment I save them in my editor.
I've noticed, however, that this often stops working. I'm guessing this may be due to javascript/jQuery that I've added to the page interfering with the plugin.
I was just wondering if it was possible to add a temporary line of javascript to mimic this auto-refresh behaviour when needed.
The easiest and hackiest solution to refreshing the page is to add this inside the head:
<meta http-equiv="refresh" content="30" />
to refresh it every 30 seconds.
You can do similar with Javascript by doing:
setTimeout('window.location.href=window.location.href;', 30000);
Note: There are several methods of reloading the page in Javascript so these will also work:
setTimeout('window.location.reload();', 30000);
and
setTimeout('history.go(0);', 30000);
and others.
Both of these will completely reload the page every 30 seconds. That's fine if all you're doing is something quick and dirty. Generally though for something users will use, you'll want to do AJAX refreshes to parts of the page instead. For example:
setInterval(refresh_table, 30000);
function refresh_table() {
$("#table_container").load("/load_table");
}
setTimeout("location.reload(true);", timeoutPeriod);
This meta tag does the magic too. It refreshes the page after every 30 seconds and you can change it too.
<meta http-equiv="refresh" content="30">
Related
I have a JSP page which has to display the status of various jobs that are running. Some of these jobs take time, so it takes a while for their status to change from processing to complete.
Is it a good idea to have a javascript function that would refresh the page every 30 seconds or so? Are there any ramifications for having a script that is constantly refreshing a page?
The other option is to have a refresh button which on click would refresh the page.
There are multiple solutions for this. If you want the page to be refreshed you actually don't need JavaScript, the browser can do it for you if you add this meta tag in your head tag.
<meta http-equiv="refresh" content="30">
The browser will then refresh the page every 30 seconds.
If you really want to do it with JavaScript, then you can refresh the page every 30 seconds with Location.reload() (docs) inside a setTimeout():
window.setTimeout( function() {
window.location.reload();
}, 30000);
If you don't need to refresh the whole page but only a part of it, I guess an AJAX call would be the most efficient way.
Just a simple line of code in the head section can refresh the page
<meta http-equiv="refresh" content="30">
although its not a javascript function, its the simplest way to accomplish the above task hopefully.
If you want refresh the page you could use like this, but refreshing the page is usually not the best method, it better to try just update the content that you need to be updated.
javascript:
<script language="javascript">
setTimeout(function(){
window.location.reload(1);
}, 30000);
</script>
Use setInterval instead of setTimeout. Though in this case either will be fine but setTimeout inherently triggers only once setInterval continues indefinitely.
<script language="javascript">
setInterval(function(){
window.location.reload(1);
}, 30000);
</script>
So I have a refresh code that allows me to refresh the page every few seconds, however there are a lot of images that do this flash thing on each couple second reload wondering if there is a better way? This is what I have any help much appreciated! The images only flash if the page is not scrolled to the top??? I don't quite understand, but I have my theory.
If you would like to refresh a specific portion of the page every few seconds, you could simply separate the part of the page which you wish to reload into a div, then refresh it like so:
setInterval(function(){
$("#yourdiv").load("yourpage.php #yourdiv");
}, timeout);
Where #yourdiv is the name of the div of the site which you want to reload, yourpage.php is the page which you wish to reload it from, and timeout is the amount of time you want it to reload in. For example, if I wanted to refresh #content every 45 seconds from index.php, I could do this:
setInterval(function(){
$("#content").load("index.php #content");
}, 45000);
This solution uses jQuery, so you'd need to include the jQuery libraries with
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
before that function.
I have the following code;
<script>
$(document).ready(function() {
$('a[href*="profile"]:contains("PETER PAN")').closest('tr').find('.fightActionInnerInner').click();
});
How would I run this, then refresh the page (say every 2-3 seconds) and rerun the script. I'm using Greasemonkey, if that helps. Thanks.
You can use the setTimeOut function with a window.location reload like this:
$(document).ready(function(){
setTimeout(function(){
window.location.reload();
}, 2000);
});
Here is the fiddle of a working example:
jsFiddle
In JavaScript you can reload the page with window.location.reload(), history.go(0) or even window.location.href=window.location.href
The code in document ready function will automatically run again on page reload.
If you want to delay something, you can do this with setTimeout:
setTimeout(function (){
//do something
}, yourMillisecondsToWaitUntilStart);
For your code it would be:
$(document).ready(function(){
$('a[href*="profile"]:contains("PETER PAN")').closest('tr').find('.fightActionInnerInner').click();
setTimeout(function(){
window.location.reload();
}, msToWait
});
Replace msToWait with the number of milliseconds you want to delay the page reload.
Read about the Meta refresh.
You just place this inside the head tag of your page
<meta http-equiv="refresh" content="3">
However, I suggest you read the whole page, specifically these parts (even if you end up using the javascript way of redirecting which other users have suggested since this text shows some general drawbacks of refreshing every few seconds, no matter what way you do it):
Use of meta refresh is discouraged by the World Wide Web Consortium (W3C), since unexpected refresh can disorient users.
Drawbacks
Meta refresh tags have some drawbacks:
If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the < next page may cause some browsers to move back to the redirecting page, whereupon the > redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
A reader may or may not want to be redirected to a different page, which can lead to user dissatisfaction or raise concerns about security.
Alternatives
For refresh
An alternative method is to provide an interaction device, such as a button, to let the user choose when to refresh the content. Another option is using a technique such as Ajax to update (parts of) the Web site without the need for a complete page refresh, but this would also require that the user enable JavaScript in their browser.
If you don't really need a page refresh, I suggest you use setTimeout javascript function, as already mentioned in another answer (except use it to trigger the click, not reload the page) since refreshing the page is a big thing to do for something small (if the click does something small, which I'm guessing it does).
I am using a web site that annoyingly refreshes its content every so often. How could I prevent that using javascript's greasemonkey firefox plugin ?
Edit:
I am indeed not able to change the source code of the server.
The
site I'm talking about is indeed a news site. Here is such an
example:
http://www.lemonde.fr/ameriques/article/2013/03/08/aux-etats-unis-le-cout-social-dramatique-des-coupes-budgetaires_1845220_3222.html
This might be a little barbaric, but if you can get access to the source code, look for any instance of location within the javascript, and then comment it out with //.
Something like
location.reload();
thus becomes
//location.reload();
This is less likely, but the refresh could also be in the HTML. So be on the lookout for this:
<meta http-equiv="refresh" content="30">
If you do happen to find that, you can either delete the line, or comment it out with <!-- and -->
<!-- <meta http-equiv="refresh" content="30"> -->
Note that this might prevent the page from updating and cause the user to need to manually refresh every so often to view new content.
If you want the page to refresh its content without reloading the page, you could find a developer who is experienced in AJAX to turn it into an asynchronous webapp, which would eliminate the need to refresh, but that is a whole 'nother discussion.
Hope this helps
EDIT
I looked through the site, and in the elements, I found a <meta> tag which causes a refresh every 900 milliseconds (or 900 seconds?).
In chrome:
Hit F12
Go to the left-most tab (elements)
Press Ctrl+F
Type refresh
Hit Enter
Right click the node that gets highlighted
Click Delete Node
This will stop the page from refreshing for the lifetime of the currently loaded copy of the page. If you refresh or navigate to another page on the site, you have to rinse and repeat, but at least it will stop it from refreshing.
I am javascript newbie. I need to collect the packet traces for a webpage by reloading it in the same tab every 30 seconds. How can I do this using javascript?
You can either use a HTML only solution:
<meta http-equiv="refresh" content="30; URL=http://www.yourdomain.com/yoursite.html">
Or use Javascript:
setTimeout(function(){
window.location.reload(1);
}, 30000);
Both ways refresh the current page every 30 seconds. Right from MDC:
Reload the document from the current
URL. forceget 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.