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

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

Related

Go back to previous page without refreshing using jquery, not angularjs

I am running a script locally and in one of the functions, it goes to different page. Once it does that, I want it go to back to previous page and continue running the script locally.
Is there a way to go back to previous page without refreshing the page.
I used parent.history.back(); this goes back to previous page but refreshes the page so my script stops running.
Is there a way to go back to previous page without refreshing the page?
TL;DR - The short answer is "No"
There is no way to go back without "refreshing" the page.
"refresh" is a somewhat vague term without an exact technical meaning ...
Going "back" by any means, whether it's the browser's back button or your .history.back() tells the browser to load the previous page it holds in its history.
Whether the page is loaded from the browser cache or re-requested from the server is up to the browser, not up to you.
In any case, it is again up to the browser whether it will re-parse the DOM and/or re-render the page. Which, in reality, it is going to do.
Any of these could be called "refresh".
At that time, however, the browser will start parsing and executing any scripts present. It will not continue wherever it was in the scripts at the time the page unloaded under any circumstances.
The page the browser goes back to is the HTML text as it was received from the server, but scripts could have significantly modified the DOM after the page was loaded. Those scripts need to run again, from the beginning, when the page is reloaded by going back.
It's conceivably possible to write a browser that saves the DOM state and js execution state when you leave a page, and restore that state when you return, but no such browser exists.
Depending on what your actual goals are for this, there are many things that could be done such as pushState() and replaceState(), single-page web applications, XMLHttpRequest, using <iframe>, etc. where you could replace the current page content (DOM) with other content without actually going "forward", and restore the saved DOM later when you "return" to the page,
but that's far too large a topic for a Stackoverflow question.
I'm not 100% following your question, but from my notes I can offer you this:
// To some url
window.location.href = 'some/new/url';
// To some url without it effecting browser back history:
window.location.replace('some/new/url');

javascript reload

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.

How to cancel browser navigation that is already in progress with JavaScript

I don't believe this is possible but thought I'd give it a shot.
As part of a project that I'm working on, there is a page on a different site that a user can navigate to via a standard anchor link. The destination page is sometimes rather slow to respond and the client wants to put a "timeout" in place so that if it is taking too long to navigate to the destination page, to cancel the browser navigation and show a message.
Is it possible with Javascript to cancel a browser navigation that is already in progress (i.e. the request to the destination site has already been made)? If so, how?
I conducted a simple test, it is possible. I used PHP to conduct the test but this will not be an issue if you use a different language. The bottom line is JavaScript can do it as seen in cancel.php. Please see the sample code:
sleep.php
<?php
sleep(30);
echo 'hello';
?>
cancel.php
<h1>hello?</h2>
<script type="text/javascript">
location.href='sleep.php';
setTimeout(function(){
location.href='#';
alert('it is taking too long to respond, probably the site is down!');
}, 10000);
</script>
After running cancel.php, it will redirect to sleep.php. After 10 seconds of loading time, it will stop loading sleep.php and conclude that the site is down.
You can redirect to somewhere else, while the current DOM is still alive.
I ran this simple test, and it redirects to yahoo.com
$("#btn").click(function() {
document.location.href = "http://www.google.com";
document.location.href = "http://www.yahoo.com";
});​
I havent tested with a timer, but seems like it should work, although I cant be sure 100%.
Please post your findings!

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.

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