on-splitter refreshing content

[Loh Yu Jian Royston]

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