CODEWITHSUNDEEP
jquery-mobile
Scott Houston
Scott Houston

Reputation: 43

How to get alert to only appear once in jQuery Mobile multiple page html

I have a multipage html (using "div data-role="page") that displays 4 pages of a document that can be swiped left or right to move between the pages back and forth.

I have an alert that I want to pop-up only when the page first loads (telling the user they can swipe to move back and forth between pages).

My problem is that it keeps popping up again every time a swipe to a new page is made and I only want it to alert them once when the page loads.

I've tried moving the script from the head to inside the element, and I've tried binding it to all the different pagecreate, pagebeforecreate, pageinit, etc. events and can't seem to figure it out.

I appreciate any advice or direction.

Here's the alert code that is currently showing on every page when swiped:

<script type="text/javascript"> 
 $('div').live("pagecreate",function(event){
alert('Swipe left and right to move between the 5 pages of this lead sheet');
});
</script>

Upvotes: 1

Views: 630

Answers (2)

pauloya
pauloya

Reputation: 2563

You can bind to the id for the page DIV (ex: div#home).

<script type="text/javascript">
    $('div#home').live("pagecreate", function (event) {
        alert('Swipe left and right to move between the 5 pages of this lead sheet');
    });
</script>

... 

<div data-role="page" id="home">

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85368

Live Example:

JS

var $alerted = false;

$('div').live('pageshow',function(event, ui) {
    // Check for secure token here
    if($alerted == false) {
        $alerted = true;
        alert('Can you see me now?');
    }
});

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Alert once</li>
            <li><a href="#alert">Alert Page</a></li>
        </ul>
    </div>
</div>

<div data-role="page" id="alert">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">The Alert</li>
            <li><a href="#home">Home</a></li>
        </ul>
    </div>
</div>

Upvotes: 0

Related Questions