CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilemobile-website
Soatl
Soatl

Reputation: 10582

JQuery Mobile: Run javascript method on new page

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 -->
    <a href = "#beforeLogin" id = "goBack" class = "InvisibleLinks"></a>
    <!-- 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)

Upvotes: 1

Views: 12174

Answers (1)

ppolyzos
ppolyzos

Reputation: 7091

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.

Upvotes: 9

Related Questions