JQuery Ajax request not working on iPhone device browser

Question

Hello all,

We are in the process of developing an iPhone web app using extensive jquery AJAX calls to extract data from an XML web service. When developing and testing on my Mac on Safari, the calls work beautifully. Problem is, as soon as we test on the iPhone emulator, or on the actual device, we are not getting anything back from the web service.

I have turned on the 'Develop' menu and changed the 'User Agent' to Mobile Safari to see if that makes a difference, but it still works on the PC side of things.

I don't think it is a cross site restriction, as all the ajax calls etc. are made from the same server and port number.

Is there a way we can do javascript debugging on the emulator to see where the call is failing?

Thanks, Devan

Answer 1

You can enable the javascript console in Mobile Safari. See the instructions here. It's basically Settings->Safari->Developer->Debug Console. This works on the emulator, and the actual device.

Answer 2

I ran into the same problem.

Check the url: parameter in the object you send to the jQuery.ajax function. Shorten it from "http://the/full/url" to "/just/the/relative/to/root/part"

To me, it seems like a Safari Mobile bug.

Answer 3

Ok, I think we have solved this, although it still leaves me perplexed.

If we do a 'dummy' XMLHttpRequest straight after the onReady() section in our code, then it seems to 'unblock' any following requests.

http = new XMLHttpRequest();

http.open("GET", "/getdata/dummy.xml);
http.onreadystatechange=function() {
    if(http.readyState == 4) {
        // alert(http.responseText);
    }
}
http.send(null);

If I comment out this code block, then following perfectly valid XML requests fail. Once again, this is only on the device, as Safari and the emulator will work without this code block in place.

PS: dummy.xml simply returns "nothing"

Answer 4

I get the same problem though it works in safari and safari on my iphone but not in the emulator and not in chrome. Weird