Currently, I am working on developing a Jquery mobile app within cordova. My goal is to dynamically construct the entire page based on Remote Restful JSON results. Since the content of this page is not fixed and will change when the JSON data on the server changes, it needs to reflect those changes in real-time on the mobile app.
I have successfully retrieved the JSON data and created the necessary JQuery markup elements within the onDeviceready function. I can even view the HTML markup through an alert message.
However, when I attempt to add this constructed markup to the body tag, nothing appears on the screen. The Emulator simply displays a blank page.
Could someone please point out what I might be doing wrong? Any suggestions for the correct approach to achieve the desired outcome would be greatly appreciated.
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>