So I have a function in a script called start() and at the end of the start() function I will ask if the user if s/he wants to play again. If they do want to play again, i want the page to refresh and im doing this using location.reload() and then i want to start from the beginning of the start function again. However, when i simply do this...
location.reload();
start();
it doesn't refresh the page. I was wondering if there is another way for me to go about doing this?
More Info:
this is a black jack game that i am creating for learning purposes.
start function is called when a button is clicked.
in the start function, the dealer and player cards will be shown and then the player has option to either hit or hold.
I wanted all of the things done in the start function erased on the webpage and i done it by refreshing the page(it was the simplest way to me). and then i wanted to call the start function again when the page is refreshed and the user selects okay on the confirm dialog box that he wants to play again.
**EDIT: http://jsfiddle.net/MAbgW/7/ my code is here. pls help if you're free. seems like an easy fix i think i might just be saying it in a confusing way.
Have you tried...
location.reload(true);
Alternatively, you could do...
location.href = location.href;
This would simply send them back to the same URL.
You don't have to reload page. Restart your function in a loop like this:
function start() {
do {
alert('The Game is On!');
} while (confirm('Do you want to play again?'))
}
start();
Do not use page reload as a means of reinitializing data - rather initialize them at the beginning of your start function (first thing inside of do block in code above)
Demo with data init: http://jsfiddle.net/e9W6q/1/
This should do it. Reloads the page and stops the rest of the start() function, unless the user is done.
EDIT:
function start(){
alert("Going...");
var cont = confirm("Do you want to continue?");
if(cont){ location.reload(); end; } // notice the end
alert("Let me know if you see this when you select OK");
}
start();
This code will work: http://jsfiddle.net/MAbgW/9/
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 am wondering if it is possible to have my program which ends with a page refresh, automatically run again after the page refreshes.
call the function(s) you want to run.
function doBusiness() {
// the business
}
doBusiness(); // leave the program where it is but make sure this is outside of any function that isn't called right away
If you don't want to do business the first time the page loads, look into sessionStorage, good starting point is mozilla doc. cheers
You can use:
<body onload="yourLoadingFunction()">
or
document.onload = function(){
//your code here
}
Any of these functions should be included in your tag in your page.
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...
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