3. Unable to load JSON data into each template after callback

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Unable to load JSON data into each template after callback

  • S

    I am new in this mobile framework, I refer to https://onsen.io/v2/api/js/ons-splitter.html for my simple mobile apps project.

    Below is my one-page code, which contains two pages, I want the news page to display the data which call from PHP server-side, using $.getJSON, however those data are called successful, but it wasn’t append to its respective template page with id reference #result as expected.

    <body>

<ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
        <ons-page>
            <ons-list>
                <ons-list-item onclick="fn.load('home')" tappable>Home</ons-list-item>
                <ons-list-item onclick="fn.load('news')" tappable>News</ons-list-item>
            </ons-list>
        </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home"></ons-splitter-content>
</ons-splitter>


<template id="home">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Home</div>
        </ons-toolbar>
        <p style="text-align: center; opacity: 0.6; padding-top: 20px;">Swipe right to open the menu!</p>
    </ons-page>
</template>

<template id="news">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Load JSON Data from PHP server-side</div>
        </ons-toolbar>
        <p style="opacity: 0.6; padding-top: 20px;">
            <ons-list>
                <ons-list-header>Articles</ons-list-header>
                <span id="result"></span>
            </ons-list>
        </p>
    </ons-page>
</template>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var apiSrc = 'http://mysite.com/ws/call-data.php';
var showData = $('#result');

$(function(){

    $.getJSON(apiSrc, function(data) {
        console.log(data);

        var content = '';

        $.each(data.blog, function(i, item) {

            content += '<ons-list-item tappable modifier="longdivider" onclick="ons.notification.alert(\''+ item.pid +'\')">' + item.title + '</ons-list-item>';
            //alert(item.title);
        })

        showData.empty();
        showData.append(content);

    });

    showData.text('Loading...');

});

//sliding menu
window.fn = {};

window.fn.open = function() {
    var menu = document.getElementById('menu');
    menu.open();
};

window.fn.load = function(page) {
    var content = document.getElementById('content');
    var menu = document.getElementById('menu');
    content.load(page)
        .then(menu.close.bind(menu));
};
//end sliding menu
</script>
</body>

    Although the news template page show blank, but I am sure that the JSON call is actually works, I might want the solution on how to append callback data append into its element, and able to load while content.load(page) is trigger?

    Appreciate for help!

    0 1 Reply
  • Onsen UI

    @skf By the time you try to modify your page it is still a template and not an actual page instance. Read about page lifecycle to see how it should be done.

    0
  • S

    @Fran-Diox said:

    bo

    Thanks!

    I mod the script to as below, now its works!

    document.addEventListener('init', function(event) {
	if(event.target.matches('#newsList')) {
	//ons.notification.alert('List is initiated.');
		loadList('http:/mysite.com/ws/call-data.php');
	}
}, false);


function loadList(apiSrc){
	var showData = $('#result');

	$.getJSON(apiSrc, function(data) {
		console.log(data);

		var lists = '';
		$.each(data.blog, function(i, item) {
			lists += '<ons-list-item tappable modifier="longdivider" onclick="ons.notification.alert(\''+ item.pid +'\')">' + item.title + '</ons-list-item>';
			//alert(item.title);
		})

		showData.empty();
		showData.append(lists);

	});

	showData.text('Loading...');
}
    0