CODEWITHSUNDEEP
jqueryioscordovajquery-mobilejquery-mobile-ajax
hemant
hemant

Reputation: 1803

Page Transition and pagebeforeshow methods- jQuery-PhoneGap-iOS?

I recently started working on phonegap for iOS with no prior experience of web development. am trying to load next html file on a button click with jQuery with help of following code:

$.mobile.changePage( "inbox.html", { transition: "slideup" });

but it doesnt work at all.I have tried by passing ID of inbox.html but still in vain. I end up using window.location.href = 'inbox.html' which doesnt support transitions

Also my pagebeforeshow method never gets called

$('#page-3').on('pagebeforeshow', function () {
                                            navigator.notification.alert("inbox");
                                            });

I am using cordova-1.6.0 and jquery-1.3 version. What am i possible doing wrong?

Upvotes: -1

Views: 1447

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Page transition problem

This code is working in an Android Phonegap project, use it to fix your code:

HTML 1 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script>
        $(document).on('pagebeforeshow', '#index', function(){       
            $(document).on('click', '#slide-me', function(){       
                $.mobile.changePage( "second.html", { transition: "slideup" });
            });
        });
            $(document).on('pagebeforeshow', '#page-3',function () {
                alert("Second page");
            });         
    </script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First page
            </h3>
        </div>        
        <div data-role="content">
            <a data-role="button" id="slide-me">Slideup</a>
        </div>
    </div>
</body>
</html>

HTML 2:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script>

    </script>   
</head>
<body>
    <div data-role="page" id="page-3">
        <div data-theme="a" data-role="header">
            <h3>
                Second page
            </h3>
        </div>        
        <div data-role="content">
            This is a second.html
        </div>
    </div>
</body>
</html>

Pagebeforeshow error

This is also working in my example, but in your case there could be 2 different problems:

Page event is executed from the HEAD

If this page event is executed from a script tag placed inside a HEAD (inside a first loaded HTML file - this will be explained in a second possibility) then you need to bind it in a different way:

$(document).on('pagebeforeshow', '#page-3',function () {
    alert("Second page");
});

If you are executing this code from a HEAD content placed inside a second file HTML

jQuery Mobile uses ajax to load pages into the DOM. Because of this, all pages loaded after the first one will have only BODY content loaded into the DOM. HEAD is going to be discarded.

As you can see, in my example, pagebefpreshow is placed inside a first index.html page. If you still want to have separated javascript then place it inside a BODY content, like this:

<html>
    <body>
       <script>
           // Your js code
       </script>
       // Rest of the page
    </body>
</html>

If you want to find out more read my other article: Why I have to put all the script to index.html in jquery mobile

Upvotes: 1

Related Questions