Question

I am making an jQuery Mobile and PhonGap app. It connects to the server-side web-services by AJAX calls using JSONP (I know about cross-domain issues, although my android dev does not suffer it). I am using PhoneGap Build to prepare an application for many operating systems.

Here is my problem:
I made a index.html that makes an AJAX call to server. I am getting an response and I am redirected to main.html. It works fine on chrome, safari and my Android device.

On the second site: main.html, I have similar request (I also tried with the same request) which doesn’t get called on Android device. However it works fine on both Chrome and Safari.

I tried switching off cache, proper permissions are granted, is added to config.xml. Note that I also tried to compile my app by eclipse, and with no result I added to /res/xml/cordova.xml.

I checked server logs, there are no requests from the second site. Here is the code:

Note: I also read jQuery mobile docs according to PhoneGap. Changing $(document).ready doesn’t solve the problem. This construction works on index.html site.

$( document ).bind( "mobileinit", function(){
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
        $.mobile.loadingMessageTextVisible = true; 
        $.mobile.showPageLoadingMsg();
        console.log('Start Strony');
})


$( document ).ready(function (){ //
        $.ajaxSetup ({
        cache: false
    });
        console.log('Start');
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
        $.ajax({                                                                   
        crossDomain: true,
        type: 'GET',
        url: 'http://ip/services/rest/contact/list', 
        callback: 'jsonpCallback',
        jsonpCallback: 'jsonpCallback',
        jsonp: '_jsonp',
        scriptCharset: "utf-8",
        contentType:  'application/json',
        dataType: 'jsonp',
        timeout : 5000,

        success: function(data){

            var html ='';
            console.log('Success');
            $.each(data.response, function(key, value) {
            html += '<li><a class=contact href="#" id="' + data.response[key].id + '" ><h1>' + data.response[key].label + '</h1><p>'+ data.response[key].customerName + '</p><p>' + data.response[key].phone + ', ' + data.response[key].email + '</p></a></li>';
            $('#ul_id').append($(html));
            html='';
            console.log('conatct');
            });
            $('#ul_id').trigger('create');    
            $('#ul_id').listview('refresh');
            //localStorage.setItem('idCustomerValue', data.re);

        },
        error: function (xhr, ajaxOptions, thrownError){
            alert("Status: " + xhr.status + ", Ajax option: " + ajaxOptions + ", Thrown error: " + thrownError);
            //location.reload();
            console.log('Blad');
        },
    }); 
});

Unfortunately, I cannot provide you server side code. Server is setup properly. As I mentioned Chrome and Safari work.

Answer 1

The problem was pageinit event and specific behaviour while linking in JQM.