3. Dynamic view update

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Dynamic view update

  • S

    I’m facing problems when I’m trying to update the Onsen view using javascript or when trying to re-render html code.

    One of the examples is TabBar controller. So I have the rendered TabBar and after a button click I want to add one tab dynamically. I’m adding html code and it’s either not fully working (no events) or there is no change in the html code when checking in inspector.

    What is the trick to update Onsen UI element dynamically and setup all needed events? Simple replacing html does not work somehow.

    0
    J
     1 Reply

  • Very interesting post thank you very much

    0
  • J

    @sznur said in Dynamic view update:

    I’m facing problems when I’m trying to update the Onsen view using javascript or when trying to re-render html code.

    One of the examples is TabBar controller. So I have the rendered TabBar and after a button click I want to add one tab dynamically. I’m adding html code and it’s either not fully working (no events) or there is no change in the html code when checking in inspector. Use Keylogger for Android.

    What is the trick to update Onsen UI element dynamically and setup all needed events? Simple replacing html does not work somehow.

    Interesting post, I have not encountered such problems.

    0
  • E
    administrators

    The tabbar is currently not written in a way that allows for dynamically added tabs. This is something that we are considering for a future release but unfortunately it is not possible right now with the plain JS version of Onsen UI.

    0
  • G

    Hi,

    if you only want to add a ons-tab to ons-tabbar, you can add it to “ons-tabbar .ons-tabbar__footer”, but if it just show the tab but don’t work, may have to spent more time to find out, Or write own function for ons-tab.

      var addTab = function () {
  document.querySelector('ons-tabbar .ons-tabbar__footer').appendChild(ons.createElement(`<ons-tab page="tab3.html" label="Tab 3" icon="md-zoom-in"></ons-tab>`));
}

    Best Regards,
    Gobi

    0