CODEWITHSUNDEEP
jquerycordova
theShadraq
theShadraq

Reputation: 29

PhoneGap / JQueryMobile Pages not initializing

When building my app, I created it using JQueryMobile. I got everything working including the use of 

 jquery($document).on('pageinit','#someID',function(){ ...});

Transitions worked great ... moving to new pages worked just fine in all browsers.

Then I set it up using PhoneGap 2.9.0. I added the include of cordova.js. Initialized the app and also added var app = ; to my main.js file. The function being called inside var app is basically a dummy function wrapping all of my pageinit calls. I can't get it to work anymore and based on window.console.log entries I know that the pageinit calls aren't happening.

My question is one of desperation as I've blown way too many hours for a customer on this subject. What should I do to get my pages firing? I'm certain this is the crux of the issue.

here is a jsfiddle - http://jsfiddle.net/3Nz9t/. It won't render whatsoever. But it will give you an idea as to what I've described above

Upvotes: 0

Views: 693

Answers (4)

theShadraq
theShadraq

Reputation: 29

Thanks to all who shared and assisted me. In the end, I did some research and some painfully slow debugging and came to the solution below.

In case anyone comes across this, wondering how I fixed this.

Leave all your JQueryMobile pageinit calls as is. Have them load just as they would in a website. Resist the urge to put them in the app.initialize() function. The issue comes in when, inside a pageinit, you have a function relying on a plugin that has to come online during the app.initialize(). All Plugins for PhoneGap need to come online during that phase.

To get around this, I added the code located in the jsFiddle prior to both my main.js file and my <script type="text/javascript">app.initialize();</script>: http://jsfiddle.net/BtzJJ/

*Note, the fiddle won't render, it's there merely to demonstrate my code.

The important part to notice is that I create a var and set it to false. This var is then looked at inside my pageinit. Since the var = 0, the portion of my init depending on my plugin is skipped over. This enables my pages to load properly utilizing JQueryMobile.

Now, inside the HTML, we see that I've defined both var app and my onDeviceReady function. Inside my function I'm including my plugin js file. In the midst of including that file I run a function that calls the code from the pageinit that was skipped over

I hope this helps save some of you time.

Upvotes: 0

Noogen
Noogen

Reputation: 1652

Try adding deviceready after body onload like the documentation example: http://docs.phonegap.com/en/edge/cordova_events_events.md.html#deviceready

Modified fiddle with onBodyLoad method added: http://jsfiddle.net/3Nz9t/2/

Remember to add: 

<body onload="onBodyLoad()">

Upvotes: 0

Ignitor
Ignitor

Reputation: 3075

It sounds like you are trying to run your app with PhoneGap in an ordinary browser. IIRC, PhoneGap isn't expected to work in ordinary browsers. The deviceready event will not be fired in an ordinary browser. For PhoneGap to work, you have to build an Android/iOS/... app using one of the ways described in the Getting Started guides.

However, if you want to test your app in an ordinary browser, there is phonegap-desktop which brings a shim cordova.js which simulates the PhoneGap API.

Upvotes: 0

Michiel Dral
Michiel Dral

Reputation: 4074

You should bind to DeviceReady instead of pageinit.

Upvotes: 1

Related Questions