Ajax loading does not work under Phonegap in Alpha 3

[octatone]

While working on a project using alpha 3, when trying to navigate multiple pages, the default ajax load never works under Phonegap. I always get the message "Error Loading Page" when clicking a link to another page.

By adding rel=external the content will load fine, but obviously without transitions.

[jblas]

I just looked at the code in more detail. I think the problem is the path.clean() function. It assumes a protocol and host, so it fails to strip the file:// off of the URL.

[scottjehl]

I looked into this a bit tonight and it appears there's a separate issue with jQuery Core's Ajax function, aside from the issue Kin patched above with the datatype arg, regarding its handling of http status codes.

thiagofesta pointed out the problem above: The 0 http status that returns after a file:// ajax request is considered an "error" in jQuery's ajax response logic, even the response actually includes the HTML that was requested!

[markusweb]

@jblas: i have a webapp where everything works the way it should. when i click on a link in a listview the new page is loaded and inserted into the dom, with page transitions and everything. i then wanted to convert this into an iphone app with the help of phonegap. in this case my index.html is loaded into the webview/browser of phonegap via file://..... when i now click on a link in the LI a http-call to my server is generated. in this case jqm does not treat that click as an "internal" click. with jquery 1.5.1 the ajax call itself works, but the page is loaded as a new seperate page. but i want to have this page loaded like an internal page into jqm with page transistions and everything. so my patch does this. maybe we have two problems here: mine was an index.html loaded via file and ajax calls to http://some.server. so far it looks good. the app works and is quite fast.

[jblas]

@scottjehl

Right, that's what I thought this checkin to core, which I mentioned above, was supposed to fix:

https://github.com/jquery/jquery/commit/cb85da7b62e74e7339ed652ade209aaffbd0c15b/

Did it not make it into 1.5.1?

• Kin

[jblas]

@markusweb

Sorry I forgot you were using cross-domain URLs. That means our code is working as designed since normally that's not possible in a browser due to security restrictions.

I just checked the Phone Gap FAQ:

http://wiki.phonegap.com/w/page/16494770/FAQ

It says:

"The cross-domain security policy does not affect PhoneGap applications. Since the html files are called by webkit with the file:// protocol, the security policy does not apply. (in Android,you may grant android.permission.INTERNET to your app by edit the AndroidManifest.xml)"

Perhaps what we need is a config option that disables our cross-domain check and allows it to fall through to the page loading code. If developers set this option for an app that is loaded in a normal (non-Phone Gap browser) that errors may occur.

• Kin

[jblas]

@markusweb

I opened a new issue for your use case:

https://github.com/jquery/jquery-mobile/issues/1191

Let's track it there because this particular issue had to do with regressions in jQuery Core's 1.5 AJAX rewrite.

• Kin

[scottjehl]

Kin, I don't see that check for 0 in jQuery 1.5.1, no. Unless it has since been refactored, it doesn't look like the change made it in.

I wonder if we could work around it internally at least. For instance, we could use Complete instead of Success, and determine whether it should be considered an error or not on our own....

[scottjehl]

I commented on that core commit to see if Julian might have any ideas on this. https://github.com/jquery/jquery/commit/cb85da7b62e74e7339ed652ade209aaffbd0c15b#commitcomment-291980

[jblas]

Just an FYI that changes to allow for cross-domain pages (issue 1191):

https://github.com/jquery/jquery-mobile/issues/1191

have landed. I think all blocking problems, mentioned in this issue, have been addressed?

Anyone using phone gap care to test and confirm?

[mainLink0435]

I believe i've found a fix for this. Seems that the returned html via ajax is just defaulting to xml, when it should be html. So in your jquery.mobile-1.0a3.js file, insert this text around line 2071:

dataType: 'html',

(using jquery 1.5.1)

[jblas]

@benpage

Thanks for taking the time to debug it. We fixed that a while back, in our HEAD, after we released Alpha 3.

Just for clarity, there were 3 issues biting phone gap folks:

• jQuery 1.5 broke file://.
• jQuery 1.5.1 fixed file:// but was thinking HTML files were XML, we worked around it by specifying dataType at time we made ajax call.
• We weren't allowing JQM to load cross-domain JQM pages. We've since added a configuration parameter for that (Issue 1191).

Closing this issue. If folks still see issues, let us know.

• Kin

[anttears]

Alas, with jQuery1.5.2 and jQuery Mobile 1.0a4 I am still seeing a never ending loading popup when clicking links. I am using a an android HTC Desire and sending my bundle up to Phonegap, then viewing the web page as an installed app.

START

If I revert to jQuery 1.4.3 and capute clicks on links then use changePage this works, but fails in later versions of jQuery.

Hope this helps. Ant

[toddparker]

@anttears can you open as a new issue and specify what version on Android you're running in the ticket?

[konklone]

I thought that a4 was supposed to specify a dataType of "html" for file URLs? On Firefox 4, upgrading to 1.0a4 with jQuery 1.5.1, my previously working file URLs now break and hang on loading.

It fixes it to add 'dataType: "html"' to the ajax call beginning at line 2506:

 $.ajax({
url: fileUrl,
type: type,
data: data,
success: function( html ) {

I'll open a new issue too, but this seems relevant here.

[woztheproblem]

I'm having issues on iOS with 1.0a4 as well. The datatype: "html" fix doesn't seem to help. Could someone post a link to the new issue here so I can contribute to that thread? (I didn't see a new issue related to this).

[konklone]

The new issue is https://github.com/jquery/jquery-mobile/issues#issue/1349, though it's a closed issue. A fix has been made to HEAD, not sure if they updated the shipped version though.

[woztheproblem]

Thanks! Glad that the fix worked for you. It doesn't seem to solve my issue with iOS and phonegap, though, so I suppose I'll open another issue if I can't figure it out with a little more testing.

On 4/6/2011 10:22 AM, klondike wrote:

The new issue is https://github.com/jquery/jquery-mobile/issues#issue/1349, though it's a closed issue. A fix has been made to HEAD, not sure if they updated the shipped version though.

[ghost]

I'm having this same issue with 1.0a4, anyone able to help here?

[toddparker]

@plethllc - Are you using alpha 4.1? In 4, we were still missing one thing to make Ajax work under PhoneGap. If you're using 4.1 and having issues, please try the latest build and report back.

[ghost]

Yes, Using 1.0a4.1 , actually just pulled it from the repo and did a make on it, also tried with jquery 1.6, still having the problem.

Here is the post on SO I made regarding the issue, although the fix was already in this version so I'm still stuck. http://stackoverflow.com/questions/5904255/phonegap-jquery-mobile-paths

Basically, the problem is having a separate file.

I have:

index.html search.html (this is just a stub page with a "page" div for jquery mobile in it"

when I click a link on index.html to "href="search.html", I get the infinite spinner.

If I move that code into the page and use a in page anchor reference it works (like href="#search_div")

If I remove jquery mobile, the link works fine.

[jblas]

@plethllc

What device/emulator/platform and version are you testing phonegap on?

[ghost]

OSX 10.6, jquery 1.5.2 (also tried 1.6), phonegap 0.9.5

jquery.mobile 1.0a4.1 (also tried pulling the most recent from github and doing a make, didn't make a difference) iphone 4.3 emulator

[jblas]

Actually I can reproduce this on any non Mozilla browser. < sigh > Something must've changed because this really did work before.

[jblas]

I filed this as Blocker Issue 1578:

https://github.com/jquery/jquery-mobile/issues/1578

[jblas]

@plethllc

I just landed a fix for issue 1578. I tested your situation in PhoneGap, but on Android and it seems to fix things. I don't have my mac handy to test iOS.

https://github.com/jquery/jquery-mobile/commit/e775f5e83a2b769479baeacc79c6912b381f5950