Question

I have an HTML/JavaScript app that I’m trying to convert to an App using PhoneGap via the Phonegap Build app

Everything works fine through the browser, and the only problem the app is having is that the call to getJSON is returning a 404 error when trying to load my local resources.

Here is the culprit:

$.getJSON( "./shapes/json/" + abbr + '.json', gotJSON(abbr) );

I have whitelisted every domain, just to be sure:

<access origin="*" />

Is this something that is not possible from the phonegap environment? Or am I doing something wrong?

If needed, I can host the files elsewhere and do a cross-domain ajax call, but I’d rather have the files right there on the device.

This is currently happening on Android, which is the only system I can test at the moment.

UPDATE:

I’m now trying:

    var xhrShapes = new XMLHttpRequest(), xhrSuccess = gotJSON(abbr);

    xhrShapes.open('GET', config.path + "/shapes/json/" + abbr + ".json");
    xhrShapes.onreadystatechange = function(e){
        if( this.readyState === 4 ){
            if( this.status === xhrSuccessCode ){
                xhrSuccess(JSON.parse(this.responseText));
            }
        }
    }
    xhrShapes.send();

config.path is “file:///android_asset/www” and I’m getting 0 as a success code (which indicates success for ‘file://’ requests). but xhrShapes.responseText is blank and everything stops at the call to JSON.parse. I feel like I’m missing something simple…

Answer 1

The problem had nothing to do with the code, but rather with the file names being case-sensitive… my abbr variable was uppercase, but filenames are lowercase. $.getJSON works perfectly, now that I’ve corrected this (though now my pride needs some repairs).