phonegap jQuery .ajax cross domain requests work in browser, fail in Android SDK

Question

I've been on this now for three days, and I've tried pretty much every piece of alternative code and fixes to no avail.

Here's the code, taken from bog-standard jQuery examples:

    $.ajax({
            url: "http://api.wunderground.com/api/4213a68e7f20c998/geolookup/conditions/forecast/q/Australia/Noarlunga.json",
            dataType: "jsonp",
            success: function(parsed_json) {
               alert("YEP!");
               var loc = parsed_json['response'];
               var weather = "Location: " + parsed_json.location.city + "<br />";
               weather += "Wind: " + parsed_json.current_observation.wind_dir + " ";
               weather += parsed_json.current_observation.wind_mph + "-" + parsed_json.current_observation.wind_gust_mph + " knts";
               $("#info").html(weather);
           }    
    });

and here's some config that lots of people suggested ( which did nothing )

    $( document ).bind( "mobileinit", function() {
        // Make your jQuery Mobile framework configuration changes here!
        $.mobile.allowCrossDomainPages = true;
        $.mobile.ajaxEnabled = true;
        $.mobile.pushStateEnabled = false;
        $.mobile.allowCrossDomainPages = true;  
    });

In addition, I have:

• added <uses-permission android:name="android.permission.INTERNET" /> to the AndroidManifest.xml file

• tested the json request URL in the browser on the same target ( works fine )

• tested the page in FireFox / Chrome ( works fine )
• tried the app on my Galaxy s2 over 3G ( UI all works fine but ajax request STILL fails )

Note this isn't the complete code, but it's just sitting in a standard phonegap deviceready listener event function wrapped in a standard .ready() function.

The fact this fails on my phone AND the SDK would seem to indicate a phonegap / Eclipse issue, and not a connection / permission issue.

I am trying to deploy to an Android 2.3 AVD, using the Android SDK. I haven't tried deploying to an Android 4 AVD yet.

I'd love it if anyone knows what the problem is because I've run out of suggestions to try!

Answer 1

If precondition is that you could modify php code on server..

Try this so you could test either in local browser or on mobile WITHOUT JSONP

1.Follow instruction of jQueryMobile website, which explains well how to make it work with phonegap (http://jquerymobile.com/test/docs/pages/phonegap.html)

In your <script></script> area, add

$(document).on("mobileinit", function(){
  //apply overrides here
  $.mobile.allowCrossDomainPages = true;
  $.support.cors = true;

});

your ajax could be

$.ajax({
           type: "GET",
           url: "http://xx.xx.xx.xx/xxx/xx.php"
        }).done(function( msg ) {
           alert(msg);
           //refresh the content
           $( '.ui-content' ).load( 'xx/xx.html', function ()  {$(this).trigger('create') });
        });

2.Your php is something like this:

 <?php
    header('Access-Control-Allow-Origin: *');//for local browser test
    $test='[{"name":"aa","address":"aa"}, {"name":"bb","address":"bb"}]';
    echo $test;
 ?>