AJAX command in appgyver steroids

Question

I have copied my phonegap project to steroids but now my ajax commands fail to work, I have no clue at all what is causing it so any suggestion might be helpfull.

This is the code that causes the problem, it always terinates to error with request.status = 0:

$.ajax({
        type: "POST",
        url: serverUrl + "login.ajax",
        data: { jsonLogin: JSON.stringify(loginObject), deviceInfo: JSON.stringify(deviceInfo)},
        async: true,
        timeout: 7000,
        cache: false,
        headers: { "cache-control": "no-cache" },
        success: function(data) {
                    ...   
                 },
        error: function(request, status, err) {
            ...
        },
        complete: function(){...}
    });     

Answer 1

AppGyver employee here!

In config/application.coffee, is your steroids.config.location = "http://localhost/index.html" or just index.html? Steroids serves app files via localhost (i.e. an internal web server on the phone) whereas PhoneGap uses the File protocol. Using localhost makes the WebView enforce stricter CORS rules, so you need an Access-Control-Allow-Origin header to the server response. HTML files served via the File protocol let cross-domain requests go through without CORS headers.

You can find a test project with an AJAX test at https://github.com/appgyver/steroids-runtime-tests

Answer 2

I think jQuery does not parse the json data becaus eyou have not specified the dataType

 $.ajax({
            type: "POST",
            url: serverUrl + "login.ajax",
            data: { jsonLogin: JSON.stringify(loginObject), deviceInfo: JSON.stringify(deviceInfo)},
            dataType: json, //Specify data type
            async: true,
            timeout: 7000,
            cache: false,
            headers: { "cache-control": "no-cache" },
            success: function(data) {
                        ...   
                     },
            error: function(request, status, err) {
                ...
            },
            complete: function(){...}
        });