Unable to load JSON data into each template after callback
-
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!
-
@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.
-
@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...'); }