從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移動頁面

回答

相關問題