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

giuliohome

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…

giuliohome

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?

giuliohome

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)

giuliohome

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>

giuliohome

Finally solved as explained here on SO.

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