Monaca Onsen UI Discord Chat Github Repo

on-splitter refreshing content



  • Hello, I am developing an app that is suppose to retrieve information from a dedicated server.

    My UI consist of on-splitter template provided by OnSen and i realised that the server retrieved content would be missing when other menu item is clicked. E.g. Home content is loaded -> Clicked on Settings -> Home (Server Content is missing)

    <!-- HTML codes-->
    <ons-splitter>
            <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
                <ons-page>
                    <ons-list>
                        <ons-list-item onclick="fn.load('home.html')" tappable>
                            Home
                        </ons-list-item>
                        <ons-list-item onclick="fn.load('settings.html')" tappable>
                            Settings
                        </ons-list-item>
                        <ons-list-item onclick="fn.load('about.html')" tappable>
                            About
                        </ons-list-item>
                    </ons-list>
                </ons-page>
            </ons-splitter-side>
            <ons-splitter-content id="content" page="home.html">
            </ons-splitter-content> <!-- Main Content of the page-->
        </ons-splitter>
    
    
    
        <template id="home.html">
            <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>
               <ons-card> 
                   <table>
                       <thead>
                           <tr>
                               <th>User</th>
                               <th>Image</th>
                           </tr>
    
                       </thead>
                       <tbody> </tbody>
                   </table>
                    <div id="displayid"> </div>
                    <div id="itemid"></div>
    
                <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> </p>
               
               </ons-card>          
               </ons-page>
        </template>
    
    
    
        <template id="settings.html">
            <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">
                        Settings
                    </div>
                </ons-toolbar>
            </ons-page>
        </template>
    
    // My JS code
    (function () {
        "use strict";
    
        var userid;
        var password;
        var url;
        var result;
        var itemid;
        var orderid;
        var JSONObject;
        var imagefile;
        var desc;
        var itemName;
    
        $(document).ready(function () {
            test();
        });
    
            function test() {
                url = serverURL() + "/getoutstandingorders.php";
                JSONObject = {
                    "userid": localStorage.getItem("userid")
                };
    
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: JSONObject,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    success: function (arr) {
                        getOutstandingOrdersResult(arr);
                    },
                    error: function () {
                        validationMsg();
                    }
                });
            }
    
            function getOutstandingOrdersResult(arr) {
    
                userid = arr[0].userID;
                itemid = arr[0].itemID;
                imagefile = arr[0].imagefile;
    
                $("#displayid").html("User ID: " + itemid);
                $("#itemid").html("itemid: " + itemid);