Cache tab content on Onsen ui

Question

So right i am working on mobile app project which was made from Onsen ui, Phonegap and just normal jquery. I am using ons-tabbar as my main template.

My problem is When i tried to use .append('some content') to add new element to some tabs it worked fine but when i changed that tab to the other tabs and go back to the same tab that already use append() function the last element that i add was gone.

So does someone know how to keep the element that was appended to that tab forever?

This is some of my code

$(document).ready(function() {

    $('#test-headd').click(function() {
        /* Act on the event */
        $('#feeds-index-container').append('<h1 style="color: #fff;">testddd</h1>');
    });
});

<ons-tabbar class="tab-wrapper">
          <ons-tab page="recents-index.html" id="recents-button" no-reload>
            <img src="img/icon/recents_icon.png" class="icon-image" alt="">
            <span>Recents</span>
          </ons-tab>
          <ons-tab page="history-index.html" id="history-button" no-reload>
            <img src="img/icon/history_icon.png" class="icon-image" alt="">
            <span>History</span>
          </ons-tab>
          <ons-tab class="first-footer-button" id="feed-tab" page="feeds-index.html" no-reload active="true">
            <img src="img/icon/feed_box_icon.png" class="footer-image-bg" alt="">
            <img src="img/icon/feeds_icon_gold.png" class="icon-image" alt="">
            <span>Feeds</span>
          </ons-tab>
          <ons-tab page="profile-index.html" id="profile-button" no-reload >
            <img src="img/icon/profile_icon.png" class="icon-image" alt="">
            <span>Profile</span>
          </ons-tab>
          <ons-tab page="setting-index.html" id="setting-button" no-reload >
            <img src="img/icon/setting_icon.png" class="icon-image" alt="">
            <span>Setting</span>
          </ons-tab>
        </ons-tabbar>

Thanks!

Andreas Argelius Andreas Argelius · Accepted Answer · 2014-12-04T02:13:52

The tabbar will reload the HTML when switching to another tab, so to get that behavior you will need to save the changes and then perform them again when the tab is opened again.

Since there's probably a lot of times when the developer wants the behavior you're describing it will be implemented in a later version.

Cache tab content on Onsen ui

1 Answers