CODEWITHSUNDEEP
jquerycordovamobile
Muthuvel P
Muthuvel P

Reputation: 147

dynamically creating a Jquery mobile Page from JSON

I am developing a Jquery mobile app in cordova, I want to construct entire page from Remote Restful JSON result, as there is no fixed content for this page, when the JSON changes in the server, the mobile app also needs to display the change.

I am able to get JSON data and able to construct JQuery markup elements in onDeviceready function and able to see the html markup in the alert.

But When I am adding it to body tag, nothing is displayed. Getting a blank page in the Emulator.

can somebody tell what I am doing wrong ? suggest correct way to achieve it.

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>

Upvotes: 0

Views: 300

Answers (1)

Aravind Sivam
Aravind Sivam

Reputation: 1099

You have to trigger the create event, the ajax request is the cross domain request, so you have to enable the cors and there are some issues that also i had fixed in script. Final code should be look like this

<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>

Upvotes: 0

Related Questions