changePage hangs on remote page loading. #2440

Closed
AlexMax opened this Issue Sep 14, 2011 · 26 comments

Comments

Projects
None yet
7 participants

AlexMax commented Sep 14, 2011

Pretty simple. If you do something along the lines of:

$.mobile.changePage('http://www.google.com');

a loading screen comes up but it simply sits and spins and never loads the remote page.

Supporting this on normal browsers will likely never be an option, however it would be nice to support this in environments where making cross-domain ajax requests is possible, such as in mobile safari.

Contributor

toddparker commented Sep 14, 2011

This should work if you enable cross domain requests and it's useful if building an app in PhoneGap. More info here:
#1191

toddparker closed this Sep 14, 2011

Zero3 commented Sep 19, 2011

As far as I can see, this used to work but broke in B3.

I just upgraded an existing app from B2 to B3, and changePage() from my PhoneGap index.html to a remote page no longer works. It appears that the call to changePage is simply ignored or that it fails silently somehow. I'm still trying to debug this.

Contributor

jblas commented Sep 19, 2011

@Zero3 @AlexMax

If you give us an example, along with info like:

  • The application document URL
  • Any base tag URL (if specified)
  • An example of the external URL you are trying to load

Examples of the URLs above would be extremely helpful. Also if using PhoneGap, what platforms are broken?

jblas was assigned Sep 19, 2011

Contributor

jblas commented Sep 19, 2011

@Zero3 @AlexMax

Also if you could let us know if you set $.mobile.allowCrossDomainPages = true from a "mobileinit" listener, that would help narrow things down. We had to restrict cross-domain page support so that it was only allowed it allowCrossDomainPages config option was true to avoid XSS problems in environments where rogue JS could manipulate the location hash.

Zero3 commented Sep 21, 2011

@jblas

I've put together a PhoneGap example showing the regression.

With B2 the jquerymobile.com site is loaded correctly. With B3 the loading spinner spins for a second or two, then disappears with nothing else happening.

To reproduce simply switch between the JQM versions loaded in src/assets/www/index.html and recompile. I tested it on a HTC Desire HD.

"$.mobile.allowCrossDomainPages = 1;" is executed inside a onDeviceReady event handler in the example.

Example: http://ge.tt/9axF208

Zero3 commented Oct 2, 2011

@toddparker @jblas

Anything else you need?

(I don't have permission to reopen this bug - should I post this a new instead?)

jblas reopened this Oct 4, 2011

Contributor

jblas commented Oct 4, 2011

@Zero3

I'm looking into it now, but I'm having intermittent problems with my phonegap app right now. When it loads I'm getting an Application Error: The connection to the server was unsuccessful.

When I don't get that error, and things startup, I am able to load jquerymobile.com as an external page just fine.

While I look into my problem, have you tried building your app against jQuery Mobile 1.0 rc1?

Zero3 commented Oct 4, 2011

@jblas

I'm sorry to hear. Thanks for looking into it though :).

I can reproduce with 1.0rc1 as well by simply adding it to my example above and switching to it instead of 1.0b2. Symptoms are the exact same as with 1.0b3.

Contributor

jblas commented Oct 5, 2011

@Zero3

I just tried building my own simple jquery mobile app that had a link to jquerymobile.com and set the $.mobile.allowCrossDomainPages = true, wrapped it in a phonegap app and it worked just fine.

I tried doing the same for your app and what I was seeing was that the phonegap events never get triggered so the changePage() never happens.

@Zero3, the way you have it written, are you sure that the jQuery Mobile framework will be all setup prior to the phonegap "online" and "deviceready" events firing? Your sample seems to assume that it can call changePage() once both online and deviceready have fired?

@AlexMax, I attempted to load google.com, but perhaps that is a bad example of an external page since that has lots of script tags in the body that rely on things in the head of the google.com page, that we don't suck in when loading a page via Ajax. Have you tried to load another page like http://jquerymobile.com/test/ from your phonegap app?? Are you setting the $.mobile.allowCrossDomainPages option to true from a mobilinit callback?

Zero3 commented Oct 6, 2011

@jblas

I see the loading spinner, so surely the events are fireing and changePage() is getting called. It spins for a couple of seconds, and then just dies with no change of page happening.

I just tried wrapping my tryLoad() function in a setTimeout() with a delay of 3 seconds, and the result is just the same. So it doesn't seem to be a race condition.

Something must have changed between b2 and b3 that causes this. Perhaps you could send me a copy of your PhoneGap test project that I could test?

Zero3 commented Oct 6, 2011

By watching my webserver logs I noticed that the page is actually being fetched. I also noticed that you can press the back button once without anything happening, suggesting that JQM thinks that it has changed the page even though it hasn't. Perhaps this is a transition regression?

Zero3 commented Oct 7, 2011

First bisect ever:

e564eb1 is the first bad commit
commit e564eb1
Author: scottjehl scott@scottjehl.com
Date: Thu Jul 28 19:15:48 2011 -0400

first pass at implementing pushstate support from an external file.

:100644 100644 a17054086ba8a38781accdfbaaf76f5d682e14c8 21c38f28a61ac1aa29542e336e69fa05a56bc56c M Makefile
:100644 100644 21baaabfca8d3800a557d9c65a5334b09800aee8 5a9d779b56016846622c333317d7fb7b3c962a46 M build.xml
:040000 040000 81318022ae02bc070f04180cb1e775083b5ab297 0de7ffc436a1835affa9ace171d6a9e30d8c364c M js

Contributor

jblas commented Oct 10, 2011

@Zero3

Thanks for looking for the offending checkin. So if you shut off the pushstate plugin, do things work properly? You would have to do something like:

$.mobile.pushStateEnabled = false;

anytime before the DOM ready event fires, or within an mobileinit callback:

$( document ).bind( "mobileinit", function() {
    $.mobile.pushStateEnabled = false;
} );

I forgot to ask, what version of phonegap you were using, and if you were seeing this on iOS or Android, or both?

Contributor

jblas commented Oct 11, 2011

@Zero3

Ok, I managed to get phonegap 1.1.0 all setup and tested your sample code within an app I built myself. At first I was seeing a page load failure. After some investigation into what the exact error was, it turns out that the XHR object was reporting a "White list rejection" error. After some research, it looks like PhoneGap introduced the notion of a whitelist to help limit the extent of an XSS attack. To enable cross domain loads now, you need to add the domain you want your app to be able to access. To do this, you need to open the Phonegap.plist file and add your domain in the External Hosts section. So for example, your app was trying to load http://jquerymobile.com, you would list jquerymobile.com under External Hosts.

After doing, this, I rebuilt the app, and your untouched source was able to load the jquerymobile.com site with no problems.

Contributor

jblas commented Oct 11, 2011

@AlexMax and @Zero3

I need some sort of confirmation from you guys that the Phonegap.plist tweak I mentioned above works for you guys. We're trying to wrap up for the 1.0rc2 release this week and I really want to get you guys (Phonegap Users) unstuck.

Zero3 commented Oct 11, 2011

@jblas

I can confirm that disabling pushstate as you explained fixes the issue using 1.0rc1. I'm using PhoneGap 1.0.0 btw.

I'll look into testing with PhoneGap 1.1.0.

Contributor

jblas commented Oct 11, 2011

@Zero3

Does the zip you made available above display that pushstate problem? Or is the pushstate problem only seen in the context of your larger app? Also, are you seeing this same problem on iOS, Android or both? Can you give me OS version specifics?

I'd like to try and figure out exactly what the problem is if we can.

Zero3 commented Oct 11, 2011

@jblas

Actually, above test was with PhoneGap 1.1.0. The PhoneGap upgrade didn't seem to affect this issue at all. I didn't have to whitelist any domains. But .plist stuff is for iOS builds I think? I'm only testing with Android here.

My zip above suffers from the pushstate problem. It's what I've done all my testing against regarding this bug. I have nothing iOS related, so I cannot test against that. I'm testing on Android 2.3.3 (HTC Desire HD).

Contributor

jblas commented Oct 12, 2011

@Zero3

So I set up my Mac with PhoneGap 1.1.0, Eclipse and the Android SDK. I took your original zip file, unzipped it, built and tested it in the 2.1, 2.2, and 2.3.3 emulator. It worked just fine for me. I was able to pull in http://jquerymobile.com just fine ... albeit sloooow.

I then went into the source and pointed the JS and CSS to the RC1 equivalents, rebuilt and re-ran it in the emulator, and things worked fine there too. I did confirm that it was actually using the RC1 stuff with some event handler alerts. Of course there was an occasional failed to connect to server error, but that was remedied by adding this:

super.setIntegerProperty("loadUrlTimeoutValue", 60000);

Before the loadUrl() call in JQMBug2440.java. Apparently the load of the main page was timing out because the emulator was sooooo slow.

Contributor

jblas commented Oct 12, 2011

@Zero3

I should also mention that I didn't have to change the setting for $.mobile.pushStateEnabled at all, so it was still active.

Zero3 commented Oct 14, 2011

@jblas

Interesting. I had to try it out myself, and was able to verify that it works just fine in an 2.3.3 emulator. I guess that this must be some kind of implementation issue on the HTC Desire HD (and other models perhaps?) then :(. Perhaps someone else with a HTC Desire HD can confirm?

nisc commented Nov 8, 2011

PhoneGap 1.2.0 has introduced quite a few changes to the whitelisting and remote page loading code, so you should check again whether the issues persist for you.

I have no problems if I set $.mobile.crossDomainPages to true in mobileinit and then add the relevant URL patterns to the phonegap.xml configuration (Android).

Zero3 commented Dec 10, 2011

I've switched away from this method and now simply load a remote site directly as the initial page in PhoneGap.

Perhaps @AlexMax or someone else can give it a try with the new version?

AlexMax commented Dec 12, 2011

Since posting this bug I had switched to window.location.href, but I decided to try $.mobile.changepage again for old times sake using Phonegap 1.2.0 and JQM 1.0 Final. It still sits and spins forever.

Member

jaspermdegroot commented Dec 5, 2012

Is this still an issue with current version of jQuery Mobile?

Owner

arschmitz commented Dec 26, 2012

since there is no response on if this is still an issue im going to close for now. if anyone can confirm this is still an issue we will reopen.

arschmitz closed this Dec 26, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment