JQuery Mobile + Phonegap：$ .ajax调用不起作用

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     
    }
});

Answer 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.

Answer 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.

Answer 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"

Answer 4

Ok, I figure the issue is actually the URL itself. The URL address is valid as it is accessible but it doesn't belong to the same domain. For example, my html file with the JQuery resides in http://www.yahoo.com/index.html but the URL which I am trying to call is http://www.google.com .

Browser prevents making an ajax call from a page hosted on one domain to a page hosted on a different domain (same origin policy) due to security issue. My solution here is to use a php file to retrieve the relevant data from another domain while the html (with JQuery) is calling the php file as follow:

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

Thank you for all the given helps!