Question

我正在使用cordova开发一个Jquery移动应用程序，我想从Remote Restful JSON结果构建整个页面，因为此页面没有固定内容，当服务器中的JSON发生变化时，移动应用程序也需要显示改变。

我能够获取JSON数据并能够在onDeviceready函数中构建JQuery标记元素，并能够在警报中看到html标记。

但是当我将它添加到body标签时，没有显示任何内容。在模拟器中获取空白页。

有人能说出我做错了什么吗？提出正确的方法来实现它。

app.js

var firstPageContent = "";

var loadMainPage = function(ussdArray) {
    var page = "<div data-role='page' id='home'> <div data-role='header' style='text-align:center;'>Company</div> <div data-role='content'>";
    page += "<ul data-role='listview' data-theme='b' data-inset='true'>";
    for (var x = 0; x < ussdArray.length; x++) {

    page += "<li data-inline='true'><a href='tel:"+ussdArray[x].UC+"'>"+ ussdArray[x].desc + " </a></li>";
    }
    page += "</ul></div> <div data-role='footer'></div></div>";//<co>
    firstPageContent += page;
};

$( document ).on( "deviceready", function(){    
        $.ajax({
        url: "http://1-dot-pmuthuvel1.appspot.com/eussd/serv",
        dataType: "text",
        success: function(dataTest) {
            var json = $.parseJSON(dataTest);
            var ussdValuesArr = json.ussd;
            loadMainPage(ussdValuesArr);
            alert(firstPageContent);
            $('body').html( firstPageContent );
        }
    });

});

的index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<title>TestApp</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile.structure-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Answer 1

你必须触发创建事件，ajax请求是跨域请求，所以你必须启用cors，并且还有一些我在脚本中修复过的问题。最终代码应如下所示

<script type="text/javascript">
    var firstPageContent = "";

    var loadMainPage = function (ussdArray) {
        var page = "<div data-role='page' id='home'> <div data-role='header' style='text-align:center;'>Company</div> <div data-role='content'>";
        page += "<ul data-role='listview' data-theme='b' data-inset='true'>";
        for (var x = 0; x < ussdArray.length; x++) {

            page += "<li data-inline='true'><a href='tel:" + ussdArray[x].UC + "'>" + ussdArray[x].desc + " </a></li>";
        }
        page += "</ul></div> <div data-role='footer'></div></div>"; //<co>
        firstPageContent += page;
    };

    $(function () {
        $.support.cors = true;
        $.ajax({
            url: "http://1-dot-pmuthuvel1.appspot.com/eussd/serv",
            success: function (dataTest) {
                var ussdValuesArr = dataTest.ussd;
                loadMainPage(ussdValuesArr);
                alert(firstPageContent);
                $('body').append(firstPageContent);
                $('[data-role=page]').trigger('create');
                $('[data-role=page]').css('display', 'block');
            }, error: function (i, ty, gh) {
            }
        });

    });
</script>

从JSON动态创建Jquery移动页面

1 个答案: