Phonegap AJAX request undefined

Question

I have problems with cordova/phonegap/ajax requests from webpage. Since the app is working with phonegap developer-app running on phone and sends ajax requests perfectly. I think it has something to do with permissions/plugins or something. But when I install app using cordova it doesn't send anything and whole ajax request returns:

readyState: 0
responseText: undefined
status: 0
text status: error
error

In config.xml I've set

<access origin="*" />

and in AndroidManifest.xml I'v set

<uses-permission android:name="android.permission.INTERNET" />

Here's the ajax request itself

$.ajax({
    method: "GET",
    crossDomain: true,
    dataType: 'json',
    url: 'http://mywebsite.com/projectname/index.php',
    data: { x: userLocation.latitude, y: userLocation.longitude },
    success: function(data){  
        alert("Success: "+ data);
    },
    error: function(xhr, textStatus, err) { 
        alert("readyState: " + xhr.readyState);
        alert("responseText: "+ xhr.responseText);
        alert("status: " + xhr.status);
        alert("text status: " + textStatus);
        alert("error: " + err);
    }
});

Including cordova.js into project:

<script type="text/javascript" src="cordova.js"></script>
<script src='js/jquery.js'></script>
<script>
    $(document).bind('mobileinit', function () {
        $.mobile.changePage.defaults.changeHash = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
</script> 
<script ...here comes js file where ajax is called out

Setting these didn't work either

$.support.cors = true;
$.mobile.allowCrossDomainPages = true;

Answer 1

If you are running Cordova 5 or newer, you will need a Content Security Policy meta tag in your HTML in order to make Ajax requests to external servers. If you started from an older Cordova version and upgraded to 5 or 6, likely your index.html didn't have one of these in it. If you started a new Cordova 5 or 6 app from the CLI then the template "Cordova is Ready" app will have one, but the sample one provided doesn't allow Ajax requests to other servers unless you explicitly configure it.

You could add something like this into your index.html to allow Ajax requests anywhere:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src http://api.fixer.io">

Alternatively look at how to configure the connect-src at content-security-policy.com or my blog post here to configure a tighter CSP that suits your needs.

Additionally you may want to use the Cordova "deviceready" event rather than "mobileinit", as you may be making your Ajax call too early before Cordova is fully ready, so do your Ajax call in the (onDeviceReady) callback of:

document.addEventListener('deviceready', this.onDeviceReady, false);

or in something that executes after that has been called, indicating Cordova is ready.

Answer 2

Apparently it took me long enough to figure it out, so heres how I got it working: First I uninstalled all the plugins from the project, then deleted folder platforms/android. In the CMD typed in:

cordova platform add android

And then installed necessary plugins again. Now it's working.