Monaca Onsen UI Discord Chat Github Repo

click on menu to set a new html page as ons-splitter-content

  • Sorry for the very simple question, please consider I’m a beginner :smile: in designing Onsen/Monaca :sparkles:
    I’m starting from the todo-list example where I have an index.html containing

      <ons-splitter id="splitter">
          <ons-splitter-side id="splitter-menu" page="menu.html" side="left" width="220px" collapse swipeable></ons-splitter-side>
          <ons-splitter-content page="list.html"></ons-splitter-content>

    in the menu under the responsive header

            <ons-list-item data-filter="all" tappable>All</ons-list-item>
            <ons-list-item data-filer="uncompleted">Pending</ons-list-item>
            <ons-list-item data-filter="completed">Completed</ons-list-item>

    I’d like to add the possibility to tap and set the ons-splitter-content to a different html page, which I’m building to test a responsive table (more info here, so let’s say I already have the html5 and the css3 to link).

    How can I change that content page when I tap on the menu, thanks :interrobang:

    I guess I have to add

            <ons-toolbar-button id="resptab">Table</ons-toolbar-button>

    in the menu e something like

    target.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));

    in the scripts (but the above querySelector doesn’t work, it’s null :confused: ) with a function

    todo.setRespTable = function() {

    to be defined…

  • I’ve fixed the first part as

    document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));

    I had to use document of course :smile:

    Still looking how to build the event handler.

    This is what I’ve tried now:

    todo.setRespTable = function() {
        ons.notification.prompt('Switch to responsive table view',{
            title: 'Responsive Table',
            cancelable: true,
            callback: function(label) {
                document.querySelector('#splitter-menu').page = "table.html"

    When debugging, I see that the page property is changed from menu.html to table.html, but no effect in the rendering (is a refresh missing somewhere?)

    P.S Maybe should this be posted in the developer corner section?

  • Solved with a Navigator! :ok_hand: :thumbsup:

              <ons-navigator id="myNavigator" animation="slide" page="list.html"/>

    and the following script

            callback: function(label) {

  • Everything seemed to work in my desktop dashboard with the Preview but when I try it with Monaca Debugger on my galaxy Android phone, it fails with the error in the Log showing that querySelector is null

    document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));

    Please help me :sweat:

    By the way, I’ve also noticed that the following button is not shown in the menu when I run the app on the Android phone, while - again - I can see it as expected from the dashboard Preview.

        <ons-toolbar-button id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>Table</ons-toolbar-button>

  • Finally solved as explained here on SO.

    Find also the corresponding version implemented with OnsenUI and React in the end of this article