Hopefully a simple question; if I create a timer using JavaScript embedded within my page, and I then navigate away from that page, will the timer be automatically cancelled or will it continue to run?
EDIT
Expanding the question, if that page were to perform a post-back (in my case, this is ASP.NET Forms), and the script is rendered as a part of the page markup, would the original timer created when the form is first displayed be cancelled during that post-back or would a second timer be created?
Example (rough typed):
<body>
...
<script type='text/javascript'>
function doSomething() { ... }
x = setInterval(doSomething(), 60000);
</script>
...
<button type="submit" />
...
</body>
Following the post-back, a new timer will be created as a result of the page being re-rendered, how many timers are now running (assuming the post-back was within the interval specified by the timer)?
It'll be automatically cancelled. JavaScript code is executed within the context of a page.
Think about a page like an application. Switching to other page is like closing an application and opening a new one. This also applies to a full page refresh (i.e. when you press F5).
Related
I'm trying to refresh a page every time a user click the button so the page is set back to source code. but the location.reload() is executed after the code, and not at the beginning.
btn.addEventListener("click", () => {
location.reload()
//code...
}
Why does not reload the page immediately when the button is clicked, but only when the function ended?
Is there another way to set the page back to the source code?
why does not reload the page immediately when the button is clicked but only when the function ended?
Because JavaScript blocks navigation.
If it didn't, then the page would reload and the rest of the function wouldn't run at all (because the page it was running in has been destroyed and a new version loaded instead).
If you want to cause the page to reload and then a function to run on the new page, then you need to pass the instruction to run that function to the newly reloaded page (e.g. via sessionStorage).
When the page loads (e.g. wait for a DOMContentLoaded event), check for the instruction, act on it if needed, then delete the instruction so it won't trigger automatically next time the page loads from another mechanism).
This here seems to work but you would have to implement it in a way so that btnClicked is not always true to execute the other code. Wrapping it around the if to check 'true'. Then it reloads the page without going to the else. Setting the btnClicked to false will run the else code without reloading the page.
Hopefully this can give you an idea!
<!DOCTYPE html>
<html>
<body>
<button class="btn" >Click to reload page</button>
<p class="text">Original Text</p>
<script>
const btn = document.querySelector('.btn');
const text = document.querySelector('.text');
btn.addEventListener("click", () => {
var btnClicked = true
if(btnClicked == true){
location.reload()
} else {
text.innerHTML = 'New Text';
}
})
</script>
</body>
</html>
I'm having a problem always when I try to use the following code in a button in my HTML file.
onClick=window.location.reload();
mapGenerator();
The page reloads but the javascript (mapGenerator) that make a D3JS view doesn't appear. What am I doing wrong?
location.reload() will immediately reload the page and prevent any following code to execute.
You can, however, create a function that executes your method after the page has (re)loaded:
window.onload = function() {
mapGenerator();
};
This method will run every time the page has fully loaded. To only run the code after you have reloaded the page using location.reload(), you could create a method that handles the click by setting a cookie and then reloading the page.
function handleClick() {
document.cookie="reload=true";
location.reload();
}
This would require you to change your onClick value to onClick="handleClick();". Now, whenever the page loads, you can check whether the cookie has been set. Your window.onload function now changes to this:
window.onload = function() {
if(document.cookie.indexOf("reload") >= 0) {
mapGenerator();
}
}
Checking if a cookie exists - answer by Michael Berkowski
After the reload it's up to you whether you want to unset the cookie — if you don't, the page will run the function mapGenerator on every page load until the cookie expires.
If you need more help with cookies, check out W3Schools' tutorial.
As per your description mentioned above two actions are to be taken on click. As the first action reloads the page the second action is lost. If you want any action to be taken on load of the page, mention the same on onload event of the page.
Hey guys I have a javascript function that keeps persisting even when navigating to another page (single page templates not multipage) in Jquery Mobile
<script type="text/javascript">
setInterval("window.location.reload();", 5000);
</script>
How do I ensure that this only occurs on the page from which it is called rather than it calling it on every page I link to with ajax based navigation?
I am using Jquery Mobile 1.2
Bind it to the page where you want it to occur. Replace $('.selector') with pageID, e.g. $('#home'). You could also be more specific $('div[data-role="page"]#PageID').
// Trigger interval
$('.selector').bind('pageinit', function () {
setInterval("window.location.reload();", 5000);
});
// Stop interval when navigating away
$('.selector').bind('pagehide', function () {
clearInterval();
});
How do I ensure that this only occurs on the page from which it is
called rather than it calling it on every page I link to with ajax
based navigation?
Don't call it? Currently your code is set up to always run when it's included on the page. Either don't include it or prevent it from running in some other way (such as an if-statement).
You could clear the interval just before you navigate.
First you need to get a reference to the interval when you create it:
var intervalRef = setInterval("window.location.reload();", 5000);
Then you can clear it like this:
clearInterval(intervalRef);
// Navigate
Just cancel your timeout when the other page loads, or when the current page exits (the other page loads in ajax so the timed interval stays up).
// trigger
myInterval = setInterval("window.location.reload();", 5000);
// stop
clearInterval(myInterval);
I have an app that allows users to win prizes. To win a prize they need to get to a page like this: www.myUrl.com#isAWinner where #isAWinner is my mobile page. I am worried that someone will think of just entering that url and going directly to the winner page without actually winning. To fix this I attempted to do this:
<!-- Show this if the user is a winner -->
<div id = "isAWinner" data-role = "page">
<p>YOU WIN!!!</p>
<!-- Invisible link -->
<!-- Ensures that the user does not just enter #isAWinner to the end of the URL -->
<script type="text/javascript"> reallyAWinner()</script>
</div>
function reallyAWinner () {
alert(isAWinner);
//Check to see if they really are a winner
if (isAWinner == false) {
//Not really a winner. Send back to login
$('#goBack').click();
}
}
The problem is that the alert is hit when the page initially loads, but if i try to go to that URL afterwords, then the method is not hit again.
Am I not understanding how JQuery mobile works? Will it only hit that reallyAWinner() method when the whole HTML page loads, and not when the isAWinner page loads? If so, is there another way I can check if the user is really a winner only when the isAWinner page loads?
Edit: here is a little more info. When I enter the method initially without loading the first page, the alert in reallyAWinner() will fire before an alert I have in my document.ready method, making the $('#goBack').click(); not work (Because mobile is not loaded)
If you have enabled ajax method calls the function reallyAWinner() will be called when your initial page is called.
What you can do to call you function reallyAWinner() only when #isAWinner page is loaded you can register a "pageshow" event on the id of your page.
So you can do the following:
$('#isAWinner').live('pageshow', function () { reallyAWinner(); });
From jQueryMobile Documentation:
pageshow: Triggered on the page being shown, after its transition completes.
Hi
I have created quiz application. once login entered by user then test will start after he will submit the test then results will appear. If user clicks back button in toolbar then again earlier questions appears, it should not appear as he already given the test.
Asp.net c#
Thank you.
You can maintain a session variable where you can store a value. Then when your user submits a test, you can check that value on a test page and then decide whether to show test or not.
If you want to restrict on the client side, there is one work around here...
Just put this javascript on the html section of aspx page above head section.
This causes every back to return with a forward.
<script type = "text/javascript" >
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
</script>
You could have them take the quiz in a popup window with all of the buttons and bars hidden
<script type="text/javascript" language="javascript">
function ShowQuiz(QuizID) {
var newWin = window.open("Quixz.aspx?QuizID=" + QuizID, "Quiz", "menubar=0,resizable=2,width=620,height=500,scrollbars=1");
newWin.focus();
}
</script>
Take Quiz
I would also recommend putting an intermediate page after each that just redirects to the next page. As well as the Javascript that Muhammad Akhtar included on each quiz page.