Question

I’m currently using phonegap to write a mobile application with HTML5 and Zepto.js. Our server is using ruby on rails. On Playbook (the test device), the application freezes about 20% of the time on this one screen. If that happens, it won’t respond, and the page will scroll if dragged (something that’s normally disabled). We’re pretty sure it’s the ajax call to our server that does it. Here’s the call:

    $.ajax({
        url: myurl+ajaxData+'&callback=?',
        dataType: 'json',
        async: true,
        callback: "callback",
        success: function(body) { 
            if (body.status === "successful"){
                successful();
            }
            else {
                var errstring = body.status + ": " + body.result
                console.log (errstring);
                alert(errstring);
            }
        },
        error: function(xhr, type) { 
            var errorstring = type + ": " + xhr.status + "\n" + xhr.statusText + "\n" + xhr.responseText;
            alert (errorstring);
            console.log (errorstring);
            storage.setItem("retrieved", "false");
        }
    })

Does anyone know what might be causing this?

Answer 1

I suggest you to update your code as below by setting proper timeout to the call and a error function to catch what was the issue:

$.ajax({
    url: myurl+ajaxData+'&callback=?',
    dataType: 'json',
    async: true,
    error: function(jqXHR, strError){
        if(strError == 'timeout')
        {
          //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000
});

You can get see what type of error was thrown by accessing the textStatus parameter of the error: function(jqXHR, textStatus, errorThrown) option. The options are “timeout”, “error”, “abort”, and “parsererror”.