PhoneGap + JQuery Mobile + Transitions + Multiple HTML files = “Error Loading Page”

0
votes

I´m developing a PhoneGap application (HTML5 + CSS3 + Javascript/JQuery Mobile). I´ve started using a single HTML file with multiple pages. I´m using page transitions (Slide) on changing among pages.

The problem occurs when I break the single HTML page in multiple HTML files (one for each page). I cannot load the pages. The framework display "Error Loading Page".

I know that JQuery Mobile framework uses AJAX to load the page contents when using multiple html files. If I deploy the app in a web server (say IIS) everything goes fine. But running in local files - like PhoneGap apps demands -, the framework cannot perform an AJAX request, and consequently the page cannot be loaded "Error Loading Page".

  • I need to use JQuery Mobile
  • I need to use page transitions (slide) to improve user experience
  • I want to use multiple HTML files to not have to deal with a unique huge html file
  • The app will not be deployed to a web server because it is a PhoneGap App and must run locally in file system.
  • I´m deploying the app in an android and using the Adobe Build to generate the APK installation file.

Could someone give some advice?

Thanks!

2
javascriptjquery-mobilecordova

2 Answers

1
votes

I have solved my problem.

I was thinking that the PhoneGap would behaves like loading a page directly from file system and not allowing AJAX requests. In my tests on desktop I cannot load external links "Error Loading Page". But after publishing the app on the device all the the external links behaves accordingly. In some way the PhoneGap infrastructure can handle AJAX requests locally.

So, to test in my desktop I just put the app in IIS and the external links will work. When the app is published on the device the behavior will be the same.

0
votes

PhoneGap doesn't run a webserver. All files are loaded via file:// protocol. Thus, any request is considered cross origin.

To solve this, you need to allow requests to all hosts.

<access uri="*" subdomains="true" />

See http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html