changePage and href not loading second page with phonegap + Jquery mobile - jquery-mobile

I'm trying all kind of things with no success.
I have a Phonegap application with JQuery mobile that I test on my Samsung android 2.3.3 device (the first generation).
I'm loading a splash screen reside in index.html while doing all kind of stuff on the background. Then I'm calling $.mobile.changePage('scenario1.html'); which reside in another file. This file has many pages.
The first page is loaded but when I call the next page it does not load.
I used $.mobile.changePage('#page2') which didn't work so I replace it with a simple <a href="#page2">Next</> which still does not work.
Please help since I'm clueless.

Related

Why aren't styles loading in second page in jQuery mobile?

Below is the part of screenshot of mywebsite/index.php, a PC site with NO jQuery Mobile (JQM), with all scripts and styles.
Below the screenshot of mywebsite/mobile/options.php, a page designed to be run on mobile browsers, having JQM.
Here is the HTML script for Logout button, actually an ahchor tag:
Logout
.. refers to the main mywebsite folder out from mobile folder.
When I tap/click Logout, it should go to mywebsite/index.php, the PC site. And here's what shows up:
If I display the location using alert(document.location);, it shows - mywebsite/mobile/options.php.
I have to press F5 to view the page as it should.
I know that this is happening because JQM loads the pages AJAXually and hence ignores all scripts and stylesheets outside of BODY tag. I know this question is duplicate of many questions in StackOverflow and I have tried my level best to find a solution, but can't find one.
How do I move to the index.php without need to refresh?
You need to add additional code to your logout.php file to execute after the logout code executes. PHP headers can accomplish this. Within your PHP tags, add this to the end of your code:
header( 'Location: http://mywebsite/index.php' ) ;

Phonegap iOS app runs slow

I created a Phonegap app with HTML + CSS using jQuery Mobile. Everything works fine except for the following glitches:
Click here - link with anchor tag is extremely slow, and sometimes doesn't open up the browser to load the page.
Javascript used to draw Google maps with certain predefined locations page doesn't load at all, or if it does it takes an awful amount of time.
I would appreciate any help/suggestion.

jQuery Mobile: How can I link to an external page without breaking web app view?

I created a web app (without browser chrome) which loads most of its pages locally from index.html. Now I have one page which i can not integrate into index.html, since it has to be refreshed when loaded. I placed it on the same server and called it stats.html and link to it like this:
Stats
When I click this link, the browser pops to the front instead switching to the page without browser chrome.
How can I link to an external page in a way that it still looks like one app?
I appreciate any hints to solve this problem.
just found https://github.com/mrmoses/jQuery.stayInWebApp that seems to be the solution.

jQuery Mobile - error loading pages using PhoneGap and WP7.5 - issue with security?

I have an app that runs fine using android phonegap 1.2 and jqm 1.0, and I'm attempting to port it to windows phone 7.5.
When the index.html page loads, the first thing is does is use a $.mobile.loadpage to load another html page. all i get on the wp7.5 app is the 'error loading page' message flash up briefly. if i put an href to the page on index.html i get the same error. to summarise:
running the index.html in a desktop browser works
running the app on android works
running the app on wp7.5 without calling another page works
jqm in ie (on wp7.5) can load other pages
if i link to a public jqm site from within the app, the public site works (ie jqm will load pages that are located on the www)
i have put $.support.cors = true; in the js code to enable cross site xhr requests
it seems to me that the only issue is when jqm tries to load a local file via ajax. i assume this has something to do with default security settings in the webbrowser control that phonegap uses?
can anyone shed any light on this?
I suspect this is WP7's insistence that all pages loaded from the "local website" are actually loaded from IsolatedStorage.
In the newer Phonegap / Cordova WP7 project templates there is a file maintained per build, CordovaSourceDictionary.xml which will do this for you.
Just make sure that whatever files you want to be able to navigate to / load (yes, you have to do it for images too) have a Build Actiion of "Content" in your project and when you build it, this xml will be updated automatically.
When your app runs the first thing Cordova does on WP7 is go through all the files in this XML file and copy them to isolatedStorage so they can be loaded / navigated to.

How to get Back button working between remote and local jQuery Mobile pages?

I have a local jQuery Mobile project going (inside PhoneGap, thus file:// protocol) where I sometimes need to fetch external pages (using http://) from a server where the content too are jQM pages with almost identical markup (except for the content, which is generated from a CMS).
Setting $.mobile.allowCrossDomainPages to true gives me the page, and that is all right. Going Back, however, fails. I get stuck in a place where /www/index.html is not found on the server (like, doh, of course..). Is there a way to "remember" where I came from, taking me back to the local html page I originally came from?
We just added a docs page on PhoneGap in jQuery Mobile for RC3 that should help you out quite a bit:
http://jquerymobile.com/test/docs/pages/phonegap.html

Resources