JQuery Mobile + Phonegap : $.ajax calls not working

Question

I was searching around for solution but failed all the way. The following codes are working fine under JQuery 1.4.4, JQuery Mobile 1.0a2 and PhoneGap 0.9. However, when I transferred it to JQuery 1.7.1, JQuery Mobile 1.1.0 and PhoneGap 1.5; it keeps on fall under error. I tracked the http call through Fiddler and realized the ajax does call to the URL but why it will fall under error instead of success? Please help!

$.ajax({
type: "GET",
cache: false,
url: updateServer+'update.xml',
dataType: "xml",
error: function(xhr, settings, exception){
    alert('The update server could not be contacted.');
},
success: function(xml){
    // success code     
    }
});

Solution 1

make sure that you can access the web service from the emulator itself and have allowed the application to access internet connection.

to do this, from within the emulator, open the default browser and enter the URL. it should not give you a 404 or any exception.

Solution 2

I had this problem with Phonegap 1.5. Downgrading to Phonegap 1.4.1 solved the problem. I was frustrated for days on end and couldn't make sense of the issue.

Solution 3

jQuery Mobile has a whole page in the documentation about implementing with PhoneGap. Check it out here.

http://jquerymobile.com/test/docs/pages/phonegap.html

You have to set permissions to allow cross-domain ajax calls.

Also! Remember to change your code in your html files if you are porting over from a web app. It is likely you made get calls to url "../api/handler.php" or something. You need to make all those calls absolute for use in PhoneGap. "http://mydomain.com/api/handler.php"

Comments

[yi2ng2]

hi Martin, yes, the URL is accessible from both the browser and emulator. Do you have any clue why the ajax is still not working?

[Martin Ongtangco]

is the application allowed access to network/internet? in android, you need to include this to the Manifest.

[yi2ng2]

yea, I have included that. In fact the entire piece of codes are running just fine under JQuery 1.4.4 with JQuery Mobile 1.02a, provided it's now in JQuery 1.7.1 with JQuery Mobile 1.1.0, it failed to work as expected

[Nicolas Mommaerts]

Yes! Thanks for the comment, I solved my problem by upgrading from 1.5 to 1.7

[Douglas Drouillard]

doc url seems to have changed to jquerymobile.com/demos/1.0/docs/pages/phonegap.html, and there is also view.jquerymobile.com/master/demos/faq/…