I would like to build a webpage button which if clicked reloads the webpage every x seconds (i.e. 5 seconds = 5000 ms). The Problem is that my function gets executed once after 5 seconds, but wont continue to auto refresh after the button was clicked. It always waits for the next button click.
In theory I know that after the click my function has to be called every x seconds, but I simply don't know how to implement this.
This is how far i got:
<html>
<head>
</head>
<body>
<button id = "btn-reload">Automatischer Reload der Seite</button>
<script>
const btnReload = document.getElementById("btn-reload");
btnReload.addEventListener("click", function(){
setInterval(function(){
location.reload()}, 5000);
});
</script>
</body>
</html>
While you refreshing page all state is cleared so also interval not exist. To make it work you need something which will save the state between refresh for example local storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
You can use URL as your flag if auto refresh is enabled.
Example your-url.com?autorefresh=true
on window load check this flag is set or not to run your auto refresh feature
Related
I am looking for auto refresh the webpage and load the pervious data while loading the page.
current with button click I can refresh the data without any time limit , but I need it automatically with given time.
Add this JavaScript to your page:
It refreshs the page every 5 Seconds
<script>
setTimeout(function(){
window.location.reload(1);
}, 5000);
</script>
Or if you like to click the button with jquery every 5 Seconds:
<button id="IdOfButton" >Click me </button>
<script>
setInterval(function(){
$('#IdOfButton').trigger('click');
}, 5000);
</script>
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)
So I have a button that I want to control a process. The process can be run/pause/stop.
<div>
<button class="buttonAction" id="run" onclick = "sendData()" >Run</button>
<button class="buttonAction" id="pause" onclick = "sendData1()" >Pause</button>
</div>
So the buttons are in the same position and what I want is when the the run button is clicked the pause button appears and visa versa.
function sendData(){
//some values
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db + '&fsvalue=' + fs;
document.getElementById("run").style.visibility="hidden";
document.getElementById("pause").style.visibility="visible";
}
Whats happens is it appears for a second but then reverts back to run because of the page reload window.location.href which I am using to send values back to my controller.
Dos anyone know a way to fix this or a better way of implementing it.
Thanks in advance
Reloading the page is like erasing a whiteboard and starting over again. The next page is not going to remember the state of the JavaScript you run after it. Setting of the buttons needs to take place on the next page load. Ideally your serverside code should be setting the state of the buttons.
Try below code:
function sendData(){
//your implementation
$("#run").css("visibility","hidden");
$("#pause").css("visibility","visible");
}
function sendData1(){
//your implementation
$("#pause").css("visibility","hidden");
$("#run").css("visibility","visible");
}
You will need to use cookies or sessions to keep the changes after a page reload.
By clicking on run, sendData function will be called in that run will be displayed and pause will not displayed, as I kept style.display="none" in the same way if we click on pause, run button will not display as we are using style.display="none"
function sendData(){
document.getElementById("run").style.display="block";
document.getElementById("pause").style.display="none";
}
function sendData1(){
document.getElementById("run").style.display="none";
document.getElementById("pause").style.display="block";
}
So i solved the problem. A few of the answers didnt take into account that the page reloaded.
When the user clicked run I send this back to the controller
window.location.href = '${createLink(controller:'run', action:'run')}' + '?dbvalue=' + db+ '&buttonValue=' + "hideRun"
Then in the controller I took the hideRun and send it back to the page
String button = params.buttonValue
render view:'run.gsp', model:[button:button]
Then I had a a function that gets called on each page load
window.onload = function()
Which checked the value of
"${button}"
Then if it ssaid "hideRun" it would hide the urn button which would display the pause button.
And visa versa...
May I know if it is possible to refresh a page 90 seconds later after clicking a button.
Scenario:
At 10:10:00, a person click a button on my website. The button will show some information in the current page.
At 10:11:30, (which is 90 seconds later) the page refresh itself.
I can't seems to find any thing about this. Mostly, I see pages that show how to refresh the same page without pressing a button.
The button that I am referring to use <input type="submit"></input and not the normal <button> and therefore the page will refresh immediately.
Use window.setTimeOut for that.
document.getElementById("myBtn").addEventListener("click",function () {
var timeoutID = window.setTimeout(function () {
alert("That was 2 secs slow!");
}, 2000);
});
<button id="myBtn">delayed alert</button>
How can i refresh a page for every one minute using javascript.
Note: I don't have control/option to edit HTML body tag (where we usually call onload function).
Just insert this code anywhere in the page:
<script type="text/javascript">
setTimeout(function(){
location = ''
},60000)
</script>
<script type="text/javascript">
setTimeout(function () {
location.reload();
}, 60 * 1000);
</script>
setTimeout will reload the page after a specified number of milliseconds, hence 60 * 1000 = 1m. Also, since the page is being refreshed, the timeout will always be set on page load.
You do not need to have the code in the body tag. Just add this snippet below and it should work no matter where it is in the page.
<script type="text/javascript">
setInterval('window.location.reload()', 60000);
</script>
As long as you can access the HTML some where and your editor doesn't filter out tags you should be fine. If your editor has a separate area for JavaScript code then just enter setInterval line. :)
Here's the thing mate!
(Point 4 is for this particular question)
1). If you want to reload the same windows over and over again then just execute
window.location.reload()
2). If you want to hard reload from the server then execute
window.location.reload(true)
(basically, just pass true as a boolean arg to the same line of code)
3). If you want to do the same job as point 1 and 2 with a time out. i.e. execute the reload after some time JUST ONCE, then execute
setTimeout("window.location.reload()",10000);
(this should execute on the window after 10 sec. JUST ONCE)
4). If you want to keep reloading the window with a certain timeout then execute
setInterval("window.location.reload()",10000);
(this should execute on the window after 10 sec. with 10 sec. for the interval)
Surely,there're many ways to pass a callback..
setInterval(function(){window.location.reload();},10000);
or
<code>
function call1(){
location.reload(true);
}
setInterval(call1,10000);
</code>
Note:
-Have a look at MDN Guides for [setTimeout][1] and [setInterval][2] functions.
-Using the window object is optional but good to be used. (window is a global object and already available to your current window.)
If you don't want to edit the page, here's the trick. Open the console and write the below-mentioned snippet.
INTERVAL = 5 // seconds
STOP_AFTER = 15 // seconds
// Open the same link in the new tab
win1 = window.open(location.href);
// At every 5 seconds, reload the page
timer1 = setInterval(() => {
win1.location.reload();
console.log("Refreshed");
},INTERVAL*1000)
// Stop reloading after 15 seconds
setTimeout(() => clearInterval(timer1), STOP_AFTER*1000)
Since you want to reload it, you can not simply write location.reload() since the console will be cleared once it is reloaded.
Therefore, it will open a new tab with the same link. It will be easily able to control the 2nd tab using the console of the 1st tab.
When your URL has parameters, it seems that using location = '' doesn't work in IE8. The page reloads without any parameters.
The following code works for me :
<script type="text/javascript">
setTimeout(function(){
window.location.href = window.location.href;
},10000)
</script>