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

Question

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

1.4k Views Asked by hemant At 26 April 2025 at 14:35

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?

Original Q&A

There are 1 best solutions below

**Gajotres** · Answer 1

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

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

There are 1 best solutions below

Page transition problem

Pagebeforeshow error

Page event is executed from the HEAD

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

Related Questions in JQUERY

Related Questions in IOS

Related Questions in CORDOVA

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-AJAX

Trending Questions

Popular # Hahtags

Popular Questions