Android + JQM+ jsonp not working consistently

Question

I am crunntly working on Hybrid Android App using JQM + PhoneGap I am doing a JSONP request with AJAX

It works well on all Chrome PC browser, also works well on my android application when WiFi is connected, but when changing network connection to 3G the AJAX request is not responding.

I found @BruceHill related post that wrote the following : "mobile operators do content modification before delivering it to the phone and this modification breaks jQuery" Jquery mobile page not loading correctly on Netherlands 3G connections

Although I am not living in Holland, I tried doing what he suggests by locating all the JS files on a remote server and called it via CDN, but unfortunately it didn't help.

I will be happy to get some help on this one...

this is my AJAX request:

$.mobile.allowCrossDomainPages = true;

$('#expertsListPage').live('pageshow', function (event) {
   $.mobile.showPageLoadingMsg(); 
    getExpertsList();
});


var catId;
var catName
function getExpertsList() {


    $('#expertsList li').remove();
    catId = getUrlVars()["id"];
    catName = getUrlVars()["cat"]  ;

    $('h1').text( unescape(catName) );

    var url = 'http://apis.mydomain.com/mydata.svc/jsonp' 


    $.ajax({
         cache: true,
         type: 'GET',
         url: url,
         dataType: 'jsonp' ,
         jsonp: 'callback',
         success:api_do
    });


}

var expertss;
function api_do(obj) {

    $('#expertsList li').remove();

    expertss = obj.experts;

    $.each(expertss, function (index, expert) {

        $('#expertsList').append('<li><a  href="ExpertDetails.html?id=' + expert.id + '&catid=' + catId +'&catName=' + catName + '">' +
                    '<img style="width:160px;height:160px;" src="' + expert.thumbnail + '"/>' +
                    '<h4>' + expert.name + '</h4>' +
                    '<p>' + expert.description + '</p>' +
                    '</a></li>');

    });

    $('#expertsList').listview('refresh');

    $.mobile.hidePageLoadingMsg();
}


function getUrlVars() {
    var varsExperts = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        varsExperts.push(hash[0]);
        varsExperts[hash[0]] = hash[1];
    }
    return varsExperts;
}

You can use Console logging feature of PhoneGap to print the server response string and analyze the output for wifi and 3G - this would provide details of difference (if any) between wifi communication and 3G communication. Also server side logs would be helpful to identify request received by server — Rutesh Makhijani, Jul 10 '12 at 09:47
What sort of data is your service returning? 3G is slower than WiFi and you could just be timing out. You say "AJAX request is not responding" - what error do you actually get? Add an error callback to see what the error is. — codemonkey, Jul 10 '12 at 10:45
@Makhijani Unfortunately I can't see errors on the API server, since I don't have permissions on that remote server. — ZoharAdar, Jul 10 '12 at 14:59
@codemonkey the data size is around 50KB, this is the Eclipce logcat [link](http://zohar10.brinkster.net/log22.txt) — ZoharAdar, Jul 10 '12 at 15:08
50K over 3G, I would guess it is a timeout. The logcat does not have much in it. Add an error function to your $.ajax call - error(jqXHR, textStatus, errorThrown). That gives you details on what the error was. Quite likely textStatus will be timeout. If that is the case you can either increase the timeout or try and compress your data. — codemonkey, Jul 11 '12 at 09:03
@codemonkey I discovered that the ajax requst work on the 3G, I guess the problem is not the 3G, my ajax call is unstable on my android device. Somtimes it work and print the done alert but most of the time it just stack with the pageloader without any status alerts. I know that the server is stable, for when I browse with PC Chrome and the Eclipce emulator all works fine. as you recommend I added the jqXHR, textStatus to my script, that print alerts only when Ajax call work. I just dont know what's wrong ... [Link to my JS](http://zohar10.brinkster.net/ajaxCall.js) — ZoharAdar, Jul 11 '12 at 12:26
[this is how it looks like on my device](http://zohar10.brinkster.net/screenshot.png) — ZoharAdar, Jul 11 '12 at 12:35
Another thing - with PhoneGap you don't need to use jsonp, you can use regular json. Can you also update the post with your error handling code in the AJAX call? — codemonkey, Jul 11 '12 at 12:52
@codemonkey thanks for your response, The reason I wanted to use the JQM is to review the capacity sharing between developers on different platforms(website and hybrid app), When the hybrid app will benefit from the additional capabilities of PG, I updated this post title. — ZoharAdar, Jul 11 '12 at 13:19

score 0 · Answer 1 · answered Feb 09 '13 at 05:29

Try adding this code to your javascript, might help.

$( document ).on( "mobileinit", function() {
                 // Make your jQuery Mobile framework configuration changes here!
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

Android + JQM+ jsonp not working consistently

1 Answers1