javascript - 使用 PhoneGap 和 jQuery Mobile 在 Android 设备上显示动态 ListView

Question

我的代码有问题。它可以在 Chrome 中运行，但不能在 Android 上运行，甚至alert("test") 也不会被调用。我使用 PhoneGap 制作了 apk。我也使用 jQuery Mobile。我缺少什么？还有其他方法可以利用 json 响应中的数据制作动态 ListView 吗？

感谢您的回答。

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

$( document ).ready(function (){

$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
e.preventDefault();
    alert("test");//-----------------------------------------------

        $.ajax({                                                                   
        crossDomain: true,
        type: 'GET',
        url: 'http://ip/services/rest/contact/list', 
        callback: 'jsonpCallback',
        jsonpCallback: 'jsonpCallback',
        jsonp: '_jsonp',
        contentType:  'application/json',
        dataType: 'jsonp json',
        timeout : 10000,

        success: function(data){
            var html ='';
            alert("data.firstName");
            $.each(data, function(key, data) {
            html += '<li><a class=contact href="#" ><h1>' + data.label + '</h1><p>'+ data.customerName + '</p><p>' + data.phone + ', ' + data.email + '</p><p>' + data.id + '</p></a></li>';
            $('#ul_id').append($(html));
            html='';
            });
            $('#ul_id').trigger('create');    
            $('#ul_id').listview('refresh');
        },
        error: function (xhr, ajaxOptions, thrownError){
            alert("Status: " + xhr.status + ", Ajax option: " + ajaxOptions + ", Thrown error: " + thrownError);
            //location.reload();
        },
    }); 
;

});

Answer 1

根据jquerymobile docs您应该使用 $(document).bind('pageinit')，而不是 $(document).ready()。更重要的是，当使用phonegap时，您需要绑定(bind)到“deviceready”。

尝试将代码更改为以下内容:

document.addEventListener("deviceready", onDeviceReady, true);

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

var onDeviceReady = function(){

$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
e.preventDefault();
    alert("test");//-----------------------------------------------

    $.ajax({                                                                   
    crossDomain: true,
    type: 'GET',
    url: 'http://ip/services/rest/contact/list', 
    callback: 'jsonpCallback',
    jsonpCallback: 'jsonpCallback',
    jsonp: '_jsonp',
    contentType:  'application/json',
    dataType: 'jsonp json',
    timeout : 10000,

    success: function(data){
        var html ='';
        alert("data.firstName");
        $.each(data, function(key, data) {
        html += '<li><a class=contact href="#" ><h1>' + data.label + '</h1><p>'+ data.customerName + '</p><p>' + data.phone + ', ' + data.email + '</p><p>' + data.id + '</p></a></li>';
        $('#ul_id').append($(html));
        html='';
        });
        $('#ul_id').trigger('create');    
        $('#ul_id').listview('refresh');
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert("Status: " + xhr.status + ", Ajax option: " + ajaxOptions + ", Thrown error: " + thrownError);
        //location.reload();
    },
};