$.getJSON in PhoneGap not working

Question

var app = {
    // Application Constructor
    initialize: function() {
        $.getJSON( "http://domain.com/api/data")
          .done(function( json ) {
            alert("SUCCESS!");
          })
          .fail(function( jqxhr, textStatus, error ) {
            alert("Failure! Error: " + error);
        });
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

When running the script above I see the following alert: "Failure! Error: ". The error argument has no value so I'm having trouble finding where the problem actually is. Most other questions with this title have the best answer as not adding the domain of the endpoint, I can rule that out:

To view my config.xml file click here.

You will see that I set origin="*" which should allow communication with all endpoints no matter what domain. Any ideas as to why this is happening?

UPDATE

It is something to do with my server as other servers show the "SUCCESS" alert message. Still yet to find the specific issue, though. For some reason my server doesn't seem to like cross origin requests... I have disabled the firewall but no success there. Would just like to confirm that the requests works perfectly fine when on the same URL.

Server sites-enabled/000-default.conf:

<VirtualHost *:80>
    Header add Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Methods "GET, OPTIONS"

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

What web server are the service running on? Try to set the allow header to OPTIONS for the service — Morten OC, Apr 25 '14 at 18:44
@MortenOC Running Ubuntu 12.04, Apache 2.4.7, will try that now and let you know in a sec, thanks — jskidd3, Apr 25 '14 at 18:46
@MortenOC Edited question with my VirtualHost configuration... enabled headers etc, no luck, still fails :-( — jskidd3, Apr 25 '14 at 18:52
Hmm strange. Have you seen this one?: http://stackoverflow.com/questions/1256593/jquery-why-am-i-getting-an-options-request-instead-of-a-get-request — Morten OC, Apr 25 '14 at 18:53
@MortenOC Just had a look but not sure I understand the relevance, starting to lose the will to live, been going around in circles for the past 4 hours x( — jskidd3, Apr 25 '14 at 18:54
I had a lot of problems with this on a project. I fixed it by adding OPTIONS to the service (it was on a IIS). Can you try to call it with jsonP in your js.. lets see if that works. Also, try to see what the response of textStatus is in your failure — Morten OC, Apr 25 '14 at 19:13
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51458/discussion-between-jskidd3-and-morten-oc) — jskidd3, Apr 25 '14 at 19:17

score 1 · Accepted Answer · answered Apr 25 '14 at 19:50

1

The solution to this one:

In your .htaccess on the server, add this line

Header set Access-Control-Allow-Origin "*"

answered Apr 25 '14 at 19:50

Morten OC

1,784
2
23
30

$.getJSON in PhoneGap not working

1 Answers1