从JSON动态创建Jquery移动页面

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

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

但是当我将它添加到身体标记时，什么也不显示。在模拟器中获得一个空白页面。

有人可以告诉我做错了什么吗？建议正确的方法来实现它。

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>

来源

2014-10-07 Muthuvel P

你必须触发创建事件，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>

来源

2014-10-07 15:53:38

$（'[data-role] = page'）。trigger（'create'）;对pagedisplay没有影响，仍然是空白 – 2014-10-07 19:19:20

我在浏览器中试过这个。获取对象不支持此属性或方法。 – 2014-10-08 04:51:25

选择器存在问题。试试这个$（'[data-role = page]'）。trigger（'create'）; – 2014-10-08 13:52:30

从JSON动态创建Jquery移动页面

回答

相关问题