Opening a new page by Monaca with Onsen UI

Question

I have following code done. I have <ons-splitter> in the index.html.

I want to create a new page with NEW button here. I have tried it but no action shows in preview.

My code is below, Please help,

<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
  <ons-page>
    <ons-list>
      <ons-list-item onclick="fn.load('home.html')" tappable>
        Home
      </ons-list-item>
      <ons-list-item onclick="fn.load('settings.html')" tappable>
        Settings
      </ons-list-item>
      <ons-list-item onclick="fn.load('about.html')" tappable>
        About
      </ons-list-item>
    </ons-list>
  </ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>

---

    <ons-template id="home.html">
   <ons-navigator var="myNavigator">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main
        </div>
      </ons-toolbar>
      <p style="text-align: left; opacity: 0.6; padding-top: 20px; margin-left: 15px">
        Category
      </p>
        <ons-list>
        <ons-list-item tappable>a</ons-list-item>
        <ons-list-item tappable>b</ons-list-item>
        <ons-list-item tappable>c</ons-list-item>
      </ons-list>
           <ons-button modifier="quiet" onclick="myNavigator.pushPage('page2.html')">
                New 
            </ons-button>
    </ons-page>
    </ons-navigator>
  </ons-template>

Answer 1

Are you using angular? Since you're using onclick and haven't tagged it I'm guessing the answer is no.

In that case the problem you are experiencing is probably Uncaught ReferenceError: myNavigator is not defined. To see such problems you can open the browser console (ctrl + shift + L or F12 -> Console). Once you see the problem solving it becomes easier.

The problem itself means you don't have a variable myNavigator. That's because the var attribute is for angular only.

To fix the issue you need these 2 steps:

1. change var to id
2. add var myNavigator = document.getElementById('myNavigator'); in your javascript code.

In theory in some browsers the second part may not be necessary, but for mobile devices it's better that you write it so you can be sure everything works.