CODEWITHSUNDEEP
jqueryiosiphoneajaxpost
Rahish Saifi
Rahish Saifi

Reputation: 1

Ajax post method not working in iphone, shows o error and works fine in every browser

The code below works fine in all browsers, but in iphone it always shows error and status is 0.

$.ajaxSetup({

    "Access-Control-Allow-Headers": "*",
    "cache-control":"no-cache",
    "Access-Control-Allow-Methods": "POST, OPTIONS",
    "Access-Control-Allow-Origin":"url",

    beforeSend:function(xhr){
        alert("before send");
        xhr.setRequestHeader("content-Type","application/json; charset=utf-8");
        $.support.cors = true;
        cache = false;
        async =false;
        crossOrigin = true;
        crossDomain = true;
        processData = false;
    },

    complete:function(result,status,errorThrown){
        console.log(result);
        alert("complete============ "+status);
        alert("after complete");
        e.preventDefault();
    },

    error:function(result,status,errorThrown){
        alert("i am in error block");
        alert(status);
        alert(errorThrown);
        alert(result.status);

        $.each(result, function(i, item) {

            alert(i  +" ============="+ item);
        }); 
    },
});

var data = JSON.stringify({"loginName":mobile,"password":mobile,"firstName":fname,"middleName":Mname,"lastName":Lname,"mobileNo":mobile,"emailId":emailid,"gender":gen,"customer":{"customerType":994,"businessType":businessType,"residenceType":ResidentialType,"ownerType":OwnerType,"address":address,"blockId":blockId},
});

$.post('url',data, function(result,status,errorThrown){
    console.log(result);
    console.log("success status========"+status);
    console.log("succes status thrown =========="+errorThrown.status);
    alert("success");
    //location.href="index.html";
    console.log(data);
},'json');

Upvotes: 0

Views: 1766

Answers (2)

Steve Park
Steve Park

Reputation: 2019

In my case, disabling async by async: false makes the POST and PUT requests sent from iPhone Safari.

I had the same issue of having no POST and PUT requests only from the iOS device browsers. The desktop browsers could send those requests and even the iOS device browsers worked fine for the GET and DELETE requests.

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 the ajax function. Simply blocking the request flow resolved the POST and PUT request issue.

I suspect the async option causes skipping the POST 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 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 too by setting cache: false after checking other articles. However, I didn't get any difference on POST and PUT by disabling the cache only. Maybe disabling cache works for the case GET request doesn't work.

$.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,

Upvotes: 1

Piyush Sharma
Piyush Sharma

Reputation: 113

Change the request header from : xhr.setRequestHeader("content-Type","application/json; charset=utf-8");

To : xhr.setRequestHeader("content-Type","application/json;odata=verbose;charset=utf-8;");

Or change request header to header : {"accept":"application/json;odata=verbose;charset=utf-8;"}

Remove this from your code

var data = JSON.stringify({"loginName":mobile,"password":mobile,"firstName":fname,"middleName":Mname,"lastName":Lname,"mobileNo":mobile,"emailId":emailid,"gender":gen,"customer":{"customerType":994,"businessType":businessType,"residenceType":ResidentialType,"ownerType":OwnerType,"address":address,"blockId":blockId},
});

actually you are converting the json to string and sending that in text format. And you have specified application/json in your header. So I thing there is some type mismatch.

Upvotes: 0

Related Questions