I was wondering if it is possible to stop javascript running on a page when a link is clicked. The problem i am having is the pages refreshes every 30 seconds (A list needs to be up to date on the site) But if a user clicks a link from the list and before that has finished loading the 30 second refresh begins, it stops the link from opening and instead refreshes the page.
Here is the script that is running,
<script type="text/javascript">
window.name = "NewRegistration";
setTimeout("location.reload(true);",30000);
</script>
The link is to another page on the site.
If anything is not clear please ask.
Thanks,
Jack.
<script type="text/javascript">
var id;
function stopRefresh()
{
window.clearTimeout(id);
}
window.name = "NewRegistration";
id = window.setTimeout("location.reload(true);",30000);
</script>
Some Link
If you're using jQuery, this is much easier to apply to all the links on the page:
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
stopRefresh();
});
});
</script>
You don't have to stop all the javascript on the Page.
You have to work on your refreshing page function. For example you can set a flag to false when a link is clicked.
After 30sec
if (flag == false) do not refresh the page
else
refresh the page
That's all :)
The most common way of doing this these days is to update in the background without reloading the entire page, though that's a bit more work to set up. Read up on Ajax to learn more.
A solution that is simpler to implement is to... well, Sean Bright already beat me to that just now I see ;)
Related
I have a webpage and it has a Refresh Button. I need to click the button every 5 minutes. The Normal Refresh or Reload or F5 doesn't work in this situation. Is there a way that Javascript can do this task.
Like, I will save the javascript as Bookmark and once I click the bookmark. Then, the javascript event has to click the refresh button every 5 minutes.
I googled it and I found the below code. But, it doesn't work. When I click on it, it just showing a random number in a blank page.
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() { jQuery(".refresh").click(); },60000)
thank you in advance,
"I have a webpage and it has a Refresh Button. I need to click the
button every 5 minutes. The Normal Refresh or Reload or F5 doesn't
work in this situation. Is there a way that Javascript can do this
task."
It's not very clear to me, but every time you refresh a webpage, javascript is loaded again. So if you have intervals or variables they are reset at each refresh. If you want to keep some value among refreshs you can store values using localStorage or cookies for example.
If you want refresh automatically page you can use setInterval or metatag "refresh".
"Like, I will save the javascript as Bookmark and once I click the
bookmark. Then, the javascript event has to click the refresh button
every 5 minutes."
Look at this: Add a bookmark that is only javascript, not a URL
you can call your refresh code function or button click event in
setTimeout(yourFucntion(),5000);
else
setTimeout($("#btnName").click(),5000);
Try below code:
<!DOCTYPE html>
<html>
<body onload="f1()">
<script language ="javascript" >
var tmp;
function f1() {
tmp = setInterval(() => f2(), 2000); // replace this with 5 min timer
}
function f2() {
document.getElementById("Button1").click();
}
function f3() {
console.log("Hello World");
}
</script>
<button id="Button1" onclick="f3()">click me</button>
<div id="demo"></div>
</body>
</html>
There are two versions for you to try, one uses javascript to click the button the other automates running the function that they have tied to the button.
Non jQuery:
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){document.getElementsByClassName("refresh")[0].addEventListener('click');},60000);})()
Or with jQuery (OP's comment on original thread):
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){$ctrl.refresh();},60000);})()
Delayed post, but hopefully it helps someone :-).
The trick for me was locating the element by css document.querySelector('.pbi-glyph-refresh').click();
You can combine this with the original code like so, it correctly clicks the PowerBI refresh button on a 60 second timer (the var is in ms).
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() {document.querySelector('.pbi-glyph-refresh').click(); },60000)
I don't think this is a very basic question, but I need some help or if you can guide me to a resource I'd appreciate it. I have a script that I would like to run only when the visitor comes for the first time.
<script>
$(document).ready(function(){
$(".posts").hide();
$("#header").hide();
$("#body").hide();
$("#footer").hide();
$("#intro").click(function(){
$(".posts").show(3000);
$("#header").show(3000);
$("#body").fadeIn(3000);
$("#footer").show(3000);
$("#intro").hide();
$("p").hide();
});
});
How do I go about this? The visitor enters my site and everything is hidden, then they press a button and it shows everything in a cool way. I do not want to run this script again after visitor returns back to home page from some other page on the website. Any ideas on how this can be done? I am using javascript with jquery.
Thanks in advance.
UPDATE: Thank you Emeeus and Chiran K. for helping me. This is the code and it works fine. For first time visitor, we enter if-block, first time visitor clicks button and enters site. When visitor goes back to home page, it goes to else block, and hides what I want.
$(document).ready(function(){
if(!localStorage.getItem("firstTime")){
$(".posts").hide();
$("#header").hide();
$("#body").hide();
$("#footer").hide();
$("#start").click(function(){$(".posts").show(3000); $("#header").show(3000); $("#body").fadeIn(3000); $("#footer").show(3000);$("#start").hide(); $("p").hide(); });
localStorage.setItem("firstTime","true");
} else {
$("#start").hide();
$("p").hide();
}
});
I think this should work
if(!localStorage.getItem("firstTime")){
//code executed first time
localStorage.setItem("firstTime","true");
}else{
//code executed 2th 3th etc.
}
That could be executed after some event, like click or onload. Keep in mind that you could store whatever you want with localStorage.
There are multiple ways to achieve this depending on your exact requirement.
If you want to handle it once per session, then you can have a session variable and handle it.
If you want to handle it once per user agent, then you can use either local storage or cookies to handle it.
refer this for more info.
I have drawn a chess board in a php page. Every piece is set as draggable, and every tile as droppable. Once a piece is dropped on a tile, I'd like to reload the php page so the board can be drawn anew along with new positions.
How can I do that: reloading the php page with javascript, without displaying a window asking for confirmation such as "To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier. ->Cancel; Resend" ?
Or perhaps there are better solutions?
If you want to avoid having refresh reporting data (for any reason, including the user clicking the reload button) then use the POST-REDIRECT-GET pattern (http://en.wikipedia.org/wiki/Post/Redirect/Get). Read that, it will explain what to do.
Quick solution: you could try:
window.location.reload(true); //true sets request type to GET
Use GET, instead of POST and the dialog box you are getting will go away.
Good luck!
Make use of
window.location.reload();
will refresh automatically
<script>
var timer = null;
function auto_reload()
{
window.location = 'http://domain.com/page.php'; //your page location
}
</script>
<!-- Reload page every 10 seconds. -->
<body onload="timer = setTimeout('auto_reload()',10000);">
reference http://davidwalsh.name/automatically-refresh-page-javascript-meta-tags
I'm a bit lost.
I have two pages; Results and Detail. Whenever user navigates from Detail to Results using the browser back button, Results page should refresh, this way I can show what product user just seen on Detail (like amazon does with recently viewed items)
I don't know if it is better to load page asynchronously,
or use setTimeout as seen here (the example below works, but page refreshes forever)
if(window.top==window) {
// you're not in a frame so you reload the site
window.setTimeout('location.reload()', 3000); //reloads after 3 seconds
} else {
//you're inside a frame, so you stop reloading
}
and when I try reloading just a div also doesn't work
$('#div-id').triggerevent(function(){
$('#div-id').html(newContent);
});
I've also came across a lot of examples leading to this but didn't managed to make it work.
Any suggestion is welcome.
Thank you
The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.
If you don't care about rebuilding the page and want to actually reload it, then you could do:
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>
I believe you should reload the page asynchronously.
Maybe attaching the event ready to the body will work.
$(function(){
$('body').ready(function(){
alert('worked');
//Code to reload the page or data
});
});
I have a javascript function "myFunction()" and i need to call this function on First page load only not for all page.
how can i do it.
I will appreciate a lot your help.
thanks
The best is to store in localStorage the fact that you already visited the site (to be precise it's the "origin").
You can put this code in all your pages :
<script>
if (!localStorage['done']) {
localStorage['done'] = 'yes';
myFunction();
}
</script>
If you want to show the page again for next session, replace localStorage with sessionStorage.