Better way to refresh page and not scroll to top - javascript

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.

Related

How to reload an html link/reference

I have the following link in my HTML file
<p class = "card-text"> This is a title </p>
Text
how can I have that after I click the button and go to google, every certain block of time say 30 seconds, google is refreshed/reloaded
You can't.
There is no general way for a page to affect the next page loaded into a browser
There is no Google-specific method to cause the page to reload on a timer
It is possible to do something along these things with a page loaded into an <iframe>, but Google set the X-Frame-Options to forbid third-parties loading their homepage into a frame.
Just write an function with window.setInterval() and window.open() like this:
window.setInterval(function(){
window.open(URL, yourWindowName);
}, 30000); // Wait 30s
Don't forget to stop it with clearInterval()

Auto refresh page every 30 seconds

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>

Run jQuery, reload, rinse and repeat...how?

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).

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.

How do I refresh the browser every X seconds with javascript?

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">

Categories