CODEWITHSUNDEEP
jqueryiphoneajax
Devan
Devan

Reputation: 265

JQuery Ajax request not working on iPhone device browser

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

Upvotes: 5

Views: 23493

Answers (7)

shdev
shdev

Reputation: 1

I also had the same issue. The issue was that ajax did not work on the iPhone, and as "Steve Park" said, it was solved by handling async: false. It seems to me that location.href is affecting ajax behavior. This is because there is a location.href statement after the ajax call. (of course I'm not sure)

Upvotes: 0

Steve Park
Steve Park

Reputation: 2019

In my case, I had no ajax POST and PUT requests only from the iOS browser (GET and DELETE worked fine even from the iOS device browser) and fix the issue by disabling async by async: false which makes the POST and PUT requests are sent from iPhone Safari. If you have an issue with the GET or DELETE request, then maybe this is not the answer.

The async option is true as default to send the request asynchronously.

While investigating this issue via Web Inspector (Settings->Safari->Advanced->Web Inspector) and Mac Safari Develop function (after wiring Mac and iPhone by USB cable, you can debug JavaScript on iOS Safari from your Mac Safari), I saw ajax POST is sent only when I hold the request flow before entering ajax function by a breakpoint and release it couple seconds later to enter ajax function. Simply blocking the request flow resolved the POST and PUT request issue.

I suspect the async option causes skipping the POST and PUT request, so I disabled it. I know this is not so preferable solution for desktop browsers though, found this is the only solution that consistently worked for POST and PUT at this point.

Here my spec -> iOS: 14.7.1, jQuery: 3.5.1

I used iPhone X and iPad (4th Generation). Both devices have iOS version 14.7.1 which is the latest at this point.

I disabled cache also by cache: false, but I didn't get any difference on POST and PUT by disabling the cache only. Maybe disabling cache is a solution to the GET method issue. Since I didn't have any issue with the GET and DELETE methods from the beginning, so I can't tell.

$.ajax({
        url: '/relative-path/',
        type: 'POST',
        headers: { "CSRF-Token": token, "cache-control": "no-cache" },
        data: json_payload,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        async: false,
            :

// GET method I used is
$.get('/relative-path', function(data, status){
    // data is from service.
            :

Upvotes: 1

Kobbe
Kobbe

Reputation: 316

I had the same problem writing an AJAX chat for a website. The problem is the cache. Add this line of code and the problem is solved.

$.ajaxSetup({ cache: false });

Upvotes: 1

Jacob Wiley
Jacob Wiley

Reputation: 11

The answer for me was moving the script tag into the head tag.

Upvotes: 0

Steve K
Steve K

Reputation: 19586

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.

Upvotes: 4

Devan
Devan

Reputation: 265

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"

Upvotes: 0

user238991
user238991

Reputation: 61

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.

Upvotes: 6

Related Questions