jQueryMobile running on Android / PhoneGap refuses .load / .ajax

Question

I really hate asking questions that I feel were asked a thousand times before. This is one of those questions I feel others must have encountered, but having searched stack overflow, none of the supposed solutions work for me so I must be doing something wrong.....

I have an extremely simple app setup. index.htm, and terms.htm. There is some textual data in test.htm. I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.

At first I tried loading terms.htm's data into an element within index using $('#elementid').load('terms.htm'); (both test and index are in the same root /assets/www/ directory, and my webview loads index oncreate) but absolutely nothing was happening. So I opted to try .ajax so that I could at least get an error message, and all I get is 'error'. Surely, it is possible to load local textual assets with JQ on DroidGap?

$('#header').load('terms.htm');
$.ajax({
    type:"GET",
    timeout:10000,
    async: false,
    url: "terms.htm",
    success: function(data) {
        $('#header').html(data);
    },
    error: function(xhr,msg){
           alert( msg);
       }
});

score 0 · Answer 1 · answered Apr 20 '12 at 03:18

0

I'm not 100% sure, but I think it's a problem with ICS 4.0.3. On 4.0.2 ajax seems to work completely fine, but for me too on 4.0.3, no ajax. Like you, I've tried everything, and nothing has worked..

I'm using PhoneGap btw. Ajax works fine in the standard browser, but not in a PhoneGap app..

answered Apr 20 '12 at 03:18

Andrew Lee

1

Yup, I'm using 4.0.3 as well. I wonder if it works in 4.0.4...time to flash? – Authman Apatira Apr 20 '12 at 03:20

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

If you are running your application in Chrome Then you need to disable-web-security and enable loading local files see Cross-domain requests using PhoneGap and jQuery doesn't work Else if Safari or simulator or web-server Then it should work

edited May 23 '17 at 11:49

Community

1
1

answered Apr 20 '12 at 07:21

Peter

4,493
6
41
64

The application is running in a WebView embedded within my mobile android application. – Authman Apatira Apr 20 '12 at 14:38

score 0 · Answer 3 · answered Apr 20 '12 at 15:56

0

See this link. I had the same problem and this solved it. Also, I think they fixed it in 1.6.0 but I am now seeing the same issue on iOS with PhoneGap 1.6.1.

answered Apr 20 '12 at 15:56

praneetloke

1,953
1
14
15

score 0 · Answer 4 · answered Apr 21 '12 at 20:55

it is just a long shot, but you say "I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.". The jQuery mobile documentation says you have to set your global configuration before you load JQM:

Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

In your case this would be:

<script src="jquery.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
</script>
<script src="jquery-mobile.js"></script>

Like I said, just a guess ...

Hi daniel; thanks for the input. It does indeed seem that cors and aCDP are being set before JQM, but all to no effect =X — Authman Apatira, Apr 22 '12 at 06:19

jQueryMobile running on Android / PhoneGap refuses .load / .ajax

4 Answers4

Linked