JQuery Mobile: Run javascript method on new page - javascript

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.

Related

location.reload(), Javascript,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.

JavaScript Timers and Page Navigation

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).

Popstate with Hashtags?

I have a site that uses AJAX to dynamically load content into a div.
The links to do so are anchors with href="#" and an onclick event to trigger the AJAX.
This leaves me without a history when I click back, so if I load one page, then another and click back, it does nothing.
A basic version of the code is this:
<script type="text/javascript">
function loadXMLDoc(url)
{
<!-- Load XML Script here. -->
}
</script>
</head>
<body>
<div id="myDiv">
<!-- Target div. -->
</div>
Click Me.
Click Me.
Click Me.
</body>
What I would like to know is, can I give each link a different "#" and then use a popstate handler to call the appropriate event, so if I click link 1, 2 and then 3 and then start hitting the back button, it'll go back to 2 and then 1 etc..
I was going to use history.js and start using pushstate in the loadXML script but I think the whole manipulating history thing is a bit dirty and unreliable.
Am I thinking on the right lines or is there a better way?
Currently all my links just use "#" so that it pops back to the top of the page when loading more content but I'd like to be able to go back if possible.
Any help would be great.
Browser saves hashtags to history properly. Just add hashtag #1 to this question page, hit enter, change it to #2, hit enter, change it to #3, hit enter. Now click back button, and you'll see hash changes from #3 to #2. I recommend to change only hash itself on link click and react on page hash change and page load events.
function react() {
var hash = window.location.hash.replace("#", "");
loadXMLDoc(hash + ".txt");
};
document.body.onload = function() {
react();
window.onhashchange = react;
};
Click me
Click me
Click me
Please note that onhashchange event does not supported by old IE. The only way to deal with it if you want is to define timer with setInterval and check hashes equality.
Try to use combination of LocalStorage and HistoryAPI.
When you load XMLDoc store it in LocatStorage, when back is pressed - load data from storage, not from web.
A bit code above.
/* Handling history.back added */
window.onpopstate = function(event) {
yourHandleBackFunction(event.state);
};
function yourHandleBackFunction(renderTs) {
/*Check TS and load from localStorage if needed*/
};

How to check page is reloading or refreshing using jquery or javascript?

I have to do some kind of operation on the page refresh or reload. that is when I hit next page or Filter or refresh on the grid. I need to show some confirmation box over this Events.
is there any event which can tell you page is doing filer? refresh or paging? using javascript?
Thanks
If it is refreshing (or the user is leaving the website/closing the browser), window.onunload will fire.
// From MDN
window.onunload = unloadPage;
function unloadPage()
{
alert("unload event detected!");
}
https://developer.mozilla.org/en/DOM/window.onunload
If you just want a confirmation box to allow them to stay, use this:
window.onbeforeunload = function() {
return "Are you sure you want to navigate away?";
}
You can create a hidden field and set its value on first page load. When the page is loaded again, you can check the hidden field. If it's empty then the page is loaded for the first time, else it's refreshed. Some thing like this:
HTML
<body onLoad="CheckPageLoad();">
<input type="hidden" name="visit" id="visit" value="" />
</body>
JS
function CheckPageLoad() {
if (document.getElementById("visit").value == "") {
// This is a fresh page load
document.getElementById("visit").value = "1";
}
else {
// This is a page refresh
}
}​
There are some clarification notes on wrestling with this I think are critical.
First, the refresh/hidden field system works on the beginning of the new page copy and after, not on leaving the first page copy.
From my research of this method and a few others, there is no way, primarily due to privacy standards, to detect a refresh of a page during unload or earlier. only after the load of the new page and later.
I had a similar issue request, but basically it was terminate session on exit of page, and while looking through that, found that a browser treats a reload/refresh as two distinct pieces:
close the current window (fires onbeforeunload and onunload js events).
request the page as if you never had it. Session on server of course has no issue, but no querystring changes/added values to the page's last used url.
These happen in just that order as well. Only a custom or non standard browser will behave differently.
$(function () {
if (performance.navigation.type == 1) {
yourFunction();
}
});
More about PerformanceNavigation object returned by performance.navigation

PHP and window.close in JavaScript

I have a problem. I have a page that when you click a button, a popup with a form is shown. So, I complete some data and I submit. What I want to do is, to submit the form, close the form and refresh the parent page. I don't want to do it with AJAX.
The problem is that in my parent page I have to refresh content with the input information of the form.
So when I refresh, sometimes the data is shown and sometimes not. Do you know why this could happen?
I just use onsubmit="refreshParent()" in my form. The info is stored always in my database, so I think the problem may be that sometimes the refresh catches the new info and sometimes not.
function refreshParent() {
window.opener.location.reload();
window.close();
}
I use this to reload the page that opened a popup window:
<script language="JavaScript">
<!--
function reloadParentPage() {
window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow) {
window.opener.progressWindow.close()
}
window.close();
}
//-->
</script>
By the way, the code above is called by a link or button in the popup page.
You have a race condition between the script doing the insert and the script reloading the parent.
The solution is to call refreshParent on the page after the submit - that way you know the data is in the database. You don't even have to do it on document ready - return a stub page that just defines and calls refreshParent in the head tag.
In PHP when you run post script, at the end, include this code :
echo '<html><script language="javascript">
parent.location.href="http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"].'"; // or any other url
</script></html>';
This will output a javascript that will reload the windows.

Categories