使用PhoneGap和jQuery Mobile在Android设备上显示动态列表视图

时间:2012-08-29 09:40:47

标签: javascript ajax cordova jquery-mobile

我的代码有问题。它适用于Chrome,但不适用于Android,甚至不会调用警报(“测试”)。我使用PhoneGap制作了apk。我也使用jQuery Mobile。我错过了什么?有没有其他方法可以从json响应中生成动态列表视图?

感谢您的回答。

$( 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();
        },
    }); 
;

});

1 个答案:

答案 0 :(得分:2)

根据jquerymobile docs,您应该使用$(document).bind('pageinit'),而不是$(document).ready()。更重要的是,当使用phonegap时,你需要绑定到`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();
    },
};