Unable to load JSON data into each template after callback

skf

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!

Fran Diox

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

skf

@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...');
}