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<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…
-
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?
-
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)
-
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