Refresh the page after 90 seconds after clicking on a button - javascript

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>

Related

javascript / html auto refresh button

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

clickNextButton not executing properly when previously clicking on the next button

I am building a survey in Qualtrics and use the method clickNextButton to automatically direct the participant to the next page with questions. I implemented the method in several following pages. Furthermore, participants are also able to click the next button themselves. The problem arises when they do so: if they click on the next button before the time limit, in the next page the method directs the participant earlier than given to the page after that one.
this.hideNextButton();
var that = this;
(function(){that.clickNextButton();}).delay(40);
For example, I set the time limit on 40 seconds on every page. On page 1, the participant manually clicks on the 'next button' after 10 seconds. What happens then is that on page 2, the participant is forwarded to page 3 after 28 seconds instead of 40. If he would have clicked on the 'next button' on page 1 after 5 seconds, he would have been forwarded on page 2 to page 3 after around 33 seconds. So it apparently depends on his click speed on page 1 when he will be directed on page 2. How can I prevent this?
Rather than using the timer for automatic redirection. call respective on click method when the question is answered so it will redirect to the respective page. and also reset the timer on every page redirection.
You need to clear the timeout if the respondent clicks the Next button themselves (delay is just a prototypejs implementation of setTimeout). Do it something like this:
Qualtrics.SurveyEngine.addOnReady(function() {
this.hideNextButton();
var that = this;
var timer = setTimeout(function() { that.clickNextButton(); },4000);
Qualtrics.SurveyEngine.addOnPageSubmit(function() { clearTimeout(timer); });
});

Javascript code to Click a Button on a Webpage for every 5 Minutes

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)

Countdown time when tab is out of focus

I'm trying to calculate time when user is out of current tab.
if user is changes tab for more than 3 times, page should navigate to another page. OR if user changes tab for more than 10 seconds, page should navigate to another page.
So far i got this only:
$(window).blur(function() {
alert("You are navigating to other tabs or window. this is your first warning. Doing this again may cancel your current examination.");
});
i need something like this:
if (user changes tab){
//display warning
}
if(user changes tab for more than 3 times){
//navigate to another page
}
if(user changes tab for more than 10 seconds){
//navigate to another page
}
Answer originally came from: https://stackoverflow.com/a/1760268/680578
His code snippet can be found here: http://jsfiddle.net/meehanman/40edh944/
You are able to keep track of active/inactive tabs using jQuery's focus and blur. You should be able to use a global variable to keep track of the amount of times the user did not have their focus on your tab. Displaying your warning at the first time, and your second warning after 3 times.
Whether it has been 10 seconds can be done using a setInterval countdown for example. Which you can clear as soon as your user comes back to your tab.
var counter = 0;
$(window).focus(function() {
//do something
});
$(window).blur(function() {
//do something
});

Click function in Jquery on different .aspx pages

I have two pages: index.aspx and dream.aspx. I have a button click me on index.aspx Here's my Jquery code that clicks on that button:
function createItemButton()
{
setTimeout(
function()
{
$("#CreateItem").click();
},5000); //Delay of 5 seconds
}
createItemButton();
The delay added is because of the rest of the code not posted here. Once the click me button is triggered, it takes me to the dream.aspx page. There's another button back on that page, which when clicked, takes me back to the index.aspx page. Here's my attempt to automate everything:
function createItemButton()
{
setTimeout(
function()
{
$("#CreateItem").click(); //id of click me button on index.aspx page
},5000); //Delay of 5 seconds
}
function createItemButton1()
{
setTimeout(
function()
{
$("#back").click(); //id of back button on dream.aspx page
},7000); //Delay of 7 seconds
}
function call()
{
createItemButton();
createItemButton1();
}
call();
My thinking is that once it redirects to the dream.aspx page, it'll wait another 2 seconds ( 7000 - 5000 delay ) and the trigger a click on the back button and take me back to the index.aspx page. But for some reason, after it is taking me to the dream.aspx page, it's not triggering a click on the back button on the same page. I have tried giving multiple delays in the same setTimeout() function also. Something like:
function(){
setTimeout(function() {
$("#CreateItem").click();
$("#back").click();
}, 3000));
}
I have been informed that this code will give a delay of 3 seconds to each of the clicks. But it did not work for me. I also tried a couple of other things but nothing worked.
Basically, once I move from the index.aspx page after clicking on the click me button, I want the back button on the dream.aspx page to take me back to the index.aspx page after a couple of seconds. All automated. FYI, I am running this code in console. Any help is much appreciated. Thanks.
The code for back button (function createItemButton1()) and its call must be placed in dream.aspx. Once you leave index.aspx, all javascript code in it is gone along with any pending timeouts.

Categories

Resources