CODEWITHSUNDEEP
jqueryiosajaxhtmlgoogle-chrome
djm61
djm61

Reputation: 473

jQuery: Error With POST After Being Offline (iOS & Chrome)

I've built an HTML5 web application with offline capabilities (using AppCache). The program flow is:

We have made a business decision to use Chrome for ALL offline/HTML5 applications (because of HTML5 support). On a Windows device (using Chrome), the sync/upload works with no problems. If the user is using an iPad (iOS 7, Chrome), the first time they try to sync, an error is thrown - however the very first record IS actually synced. The error that is thrown by the XHResponse object is just "error".

We are using WebAPI 2.2 on the server side, and jQuery 2.1.1 AJAX on the client side.

The client-side JavaScript that performs the POST is as follows:

try {
    var inspections = GetCompleteInspections();
    if (inspections) {
        for (var i = 0; i < inspections.length; i++) {
            var response = null;
            var data = JSON.stringify(inspections[i]);
            $.ajax({
                async: false,
                type: "POST",
                url: "api/",
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (dta, textStatus, xhr) {
                    window.console.log("data:" + dta + "--");
                    if (d && d < 0) {
                        alert("dta is invalid:" + dta + "--");
                        response = "Error Uploading, please try again";
                    } else {
                        $("#inspection_" + i).hide();
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    if (textStatus == "timeout") {
                        alert("timeout!");
                        response = "timeout";
                    } else {
                        window.console.log(xhr.responseText);
                        var errorMessage = errorThrown || xhr.statusText;
                        response = errorMessage;
                    }
                }
            });
            if (response) {
                throw response;
            }
        }
    }
    $('#new_records').append("<tr><td>Sync Complete</td></tr>");
    $('#syncButton').hide();
    ClearInspections();
    $("#dialog-sync").dialog("close");
} catch (err) {
    $("#dialog-sync").dialog("close");
    window.alert("An error occurred during upload\n" + err);
}

This only appears to happen on iOS devices running Chrome. Windows devices do not have this issue. Is there any way to trace or diagnose what is going on? Or even how to prevent the error from happening?

Upvotes: 6

Views: 1422

Answers (2)

Mike
Mike

Reputation: 423

This error on iOS (iPhone) should be fixed by setting async attribute of request to true or completely removing this attribute

Upvotes: 0

Delaney
Delaney

Reputation: 111

I had a very similar problem once which I hacked around in a truly gross way:

Before doing the sync, I loaded a visible 1x1 transparent png from the network (set the source with a random query string to avoid caching). Then when that image loaded (onload event) I started the JavaScript calls.

To this day I don't know if there's some underlying network issue or if this only solved it by introducing a time delay on startup, but the problem never recurred and hasn't come up in the wild. Come to think of it, it's probably time to refactor that code...

Upvotes: 0

Related Questions