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!


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



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

Log in to reply