CODEWITHSUNDEEP
androidjquerycordovajquery-mobilepage-init
M Azam
M Azam

Reputation: 518

PhoneGap, jQueryMobile pageinit on first page does not fire

I am using jQueryMobile and PhoneGap to develop a cross platform mobile app. I am binding to the first page that is loaded in the app (the 'home' page) but the pageinit event does not fire. Here's my custom javascript:

$('#home').live('pageinit', function()
{
    alert('firing pageinit');
}

Here's my index.html file with the page definition:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/custom.css" />
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header" data-position="fixed">
            <a href="#refresh" data-icon="refresh" data-transition="slide" id="refresh">Refresh</a>
            <h1>MyListingsApp</h1>
            <a href="#add_listing" data-icon="plus" data-transition="slide" id="add_listing_button">Add</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" id="listings" data-filter="true" data-filter-placeholder="Filter listings...">
                <li id="hit_to_begin"></li>
            </ul>
        </div>

    </div>

<script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>

    <script src="js/jquery.ui.map.full.min.js"></script>
    <script src="js/jquery.ui.map.services.min.js"></script>
    <script src="js/jquery.i18n.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    <script type="text/javascript" src="js/custom.js"></script>

</body>

The event does not fire and all I get is the loaded homepage. According to the jQueryMobile docs this is proper binding to handle customization on page initialization.

Upvotes: 2

Views: 1724

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Look at this example: http://jsfiddle.net/Gajotres/BGkaq/, I made you 2 examples, you can find them at the bottom of the page.

Event binding example 1:

// in (url^=home) home is a page id
$(':jqmData(url^=home)').live('pagebeforecreate',function (event) {
    alert('Event has been triggered!');            
});

Event binding example 2:

$('#home').live('pagebeforecreate',function (event) {
    alert('Event has been triggered!');            
});

Upvotes: 2

Related Questions