Blank screen on PhoneGap/Android application

0
votes

I'm struggling with a Phonegap-Android application. I'm using jQuery Mobile 1.3.1 and jQuery 1.9.1, with Phonegap 2.9.0. I've got some data-role pages in my index.html and I'm generating some other dynamically with an ajax function. The problem is that always, after showing a dynamically generated page the screen goes all white. This never happens if I navigate between pages statically created in the index.html.

Any suggestions? I've tried with:

  • < meta name="viewport" content="width=device-width, user-scalable=no" />

  • CSS: .ui-page { -webkit-transform: translateZ(0); -webkit-perspective:1000; -webkit-backface-visibility: hidden; -msie-backface-visibility: hidden; -ms-backface-visibility: hidden; }

  • defaultPageTransition = "none"

The new pages are created using Mustache.js.

1
ajaxjqueryjquery-mobilecordova
Are you using .ajax() or .load() to call an external page? – PabloWeb18
Yes, .ajax() with beforeSend and success callback functions. – Jon Zangitu
So, check the page created... maybe you find some error! Can you create a JSFIDDLE? – PabloWeb18
Better, add me on skype: Pablo R. Nunes – PabloWeb18

1 Answers

0
votes

Something to quickly try would be to globally enable DOM caching in jQuery Mobile:

$.mobile.page.prototype.options.domCache = true;

or

pageContainerElement.page({ domCache: true });

I would say it stems from a given page not containing the dynamically generated markup, which you need in order to utilize jQM's ajax navigation... which uses it's own internal history tracking object to fuel the hashchange and/or popstate event.

Beyond that, I would step through how the dynamic pages are actually being added to the DOM. You should be able to keep using Mustache's template plugin, but you'll have to make sure to use the jQM to add the markup to the DOM. (Or go through a potentially long process of creating overrides... which I think you should avoid if possible.)

When you use jQM to update the DOM, it ensures the correct events fire and in the correct order, thus keeping the app data/state up-to-date.

I'm sure you're using the documentation, but I would give this another look. Might give you a better idea on what Mustache method you need to stop using, or extend/override.

Hope this helps.

jQM References

DOM Caching: http://view.jquerymobile.com/1.3.1/dist/demos/#nav-cache

Navigation Event: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/navigation/#nav-event-example

Dynamic Page Loading: http://jquerymobile.com/demos/1.3.1/docs/pages/page-dynamic.html