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);