Onsen UI 2.0 Splitter and pushPage not works together

Question

I made a main tab (tab1.html) where you have a menu to change options or go to settings... Now I want that you can click on a button on the main tab (tab1.html) to come to another oner (tab4.html). The problem is that it doesnt work both together so a menu(splitter) and a pushpage function ;/ How to solve it? The Splitter for the menu:

<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
  <ons-list>
    <ons-list-item onclick="fn.load('tab1.html')" tappable>
      <ons-icon icon="home" style="color: #1e88e5;"></ons-icon><p  style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Startseite</p>
    </ons-list-item>
    <ons-list-item onclick="fn.load('tab6.html')" tappable>
      <ons-icon icon="user" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Mein Profil</p>
    </ons-list-item>
    <ons-list-item onclick="fn.load('tab8.html')" tappable>
      <ons-icon icon="sliders" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Einstellungen</p>
    </ons-list-item>
  </ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
</ons-splitter>

And the navigator where you should come to page 4:

<ons-navigator id="pushpage_navigator" page="tab1.html"></ons-navigator>

Then tab1.html:

<ons-template id="tab1.html">
<ons-page> 
<div class="left"> <!--left-->
  <ons-toolbar-button onclick="fn.open()">
    <ons-icon icon="md-menu"></ons-icon>
  </ons-toolbar-button>
</div>
<button onclick="change()" />
</ons-page>

And tab4.html where you should come from tab1.html:

<ons-template id="tab4.html">
<ons-page>
<ons-toolbar>
  <div class="left"><ons-back-button>Back</ons-back-button></div>
  <div class="center">Uhrzeitenansicht</div>
 </ons-toolbar>
 </ons-page>
 </ons-template>

And finally the javscript:

//ONSEN UI 2.0
window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
 .then(menu.close.bind(menu));
};

function change()
{
  var myNavigator = document.getElementById('pushpage_navigator');
  myNavigator.pushPage('tab4.html');
}

If you set the 'ons-navigator'-tag before the splitter, the splitter does not work. If you set it after it you get errors like: myNavigator is null or pushPage is already running.

Ilia Yatchev · Accepted Answer · 2016-09-21T22:11:30.760

3

It looks to me as though you may have some problem with the nesting of the two elements (splitter and navigator). Both of them are supposed to act as containers for actual pages. So if you want to use both you should put one inside the other.

If you have something like:

<ons-navigator id="pushpage_navigator">
  <ons-page>
    <ons-splitter>
      <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
        <ons-page>
          <ons-list>
            <ons-list-item onclick="fn.load('tab1.html')" tappable>1</ons-list-item>
            <ons-list-item onclick="fn.load('tab6.html')" tappable>6</ons-list-item>
            <ons-list-item onclick="fn.load('tab8.html')" tappable>8</ons-list-item>
          </ons-list>
        </ons-page>
      </ons-splitter-side>
      <ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
    </ons-splitter>
  </ons-page>
</ons-navigator>

This way you will have access to both the splitter and navigator from the beginning. Demo.

If I have misunderstood you somehow or if you have further problems feel free to comment and I can update my answer accordingly.

edited Sep 21 '16 at 22:11

answered Sep 20 '16 at 23:06

Ilia Yatchev

1,254
7
9

yeah it works but there is no animation between the switch from tab1 to tab4 and the backkey does not appear? : – Tim Jansen Sep 21 '16 at 15:14
I added a link to a demo. I see both an animation and a backbutton there. Switching from tab1 to tab4 with pushPage should have an animation - maybe you're accidentally calling fn.load? If you want you can fork & modify the demo so that I can see why you're getting different results :) – Ilia Yatchev Sep 21 '16 at 22:16
I just pasted my whole HTML in your codepen and it doesnt shows the animation and backkey. https://codepen.io/anon/pen/pEREKK?&editors=101 Your function 'change()' will start when you click on the question-fab in the bottom right corner. Please try to fix it ;) PS: Some files are not loaded because of the missing javascript but thats not important the failure must be in my HTML – Tim Jansen Sep 22 '16 at 07:09
Ok - I found the problem - if you look into the code which I provided the structure is `ons-navigator > ons-page > ons-splitter` - in your version you forgot the `ons-page` in the middle. Because of that Onsen UI thinks that the second page which you're loading (tab4) is the last one and therefore it removes the backbutton since the last page in the stack doesn't need a back button. Just add the ons-page and you will be fine. [Demo](https://codepen.io/IliaSky/pen/ORWWmZ?editors=1010) – Ilia Yatchev Sep 22 '16 at 10:11

Onsen UI 2.0 Splitter and pushPage not works together

1 Answers1