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

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.

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

  • G

    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

    <body>
  <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>
  </ons-splitter>
</body>

    in the menu under the responsive header

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

    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-list-header>Responsive</ons-list-header>
        <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…

    0
  • G

    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"
        }.bind(this)
    });    
}

    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?

    0
  • G

    Solved with a Navigator! :ok_hand: :thumbsup:

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

    and the following script

            callback: function(label) {
            document.querySelector('#myNavigator').pushPage('table.html')
        }.bind(this)
    0
  • G

    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>
    0
  • G

    Finally solved as explained here on SO.

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

    0