Develop Reference

Onsen: How to use ons-splitter with ons-tabbar?

I'm using onsen ui to create a hybrid app.
I just need to know if it is possible to use ons-splitter with ons-tabbar at the same time as I cannot find any reference to that at all.
when I use ons-splitter with ons-tabbar, my ons-splitter stops working but when I remove the ons-tabbar from my page, everything starts working again.
This is my code:
<ons-splitter >
<ons-splitter-side id="menu" side="right" 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>
<ons-navigator id="navi" page="home.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
<ons-tabbar id="menu2" position="bottom">
<ons-tab page="home.html" label="Search For Personal Trainers" icon="search-plus" onclick="fn.load('home.html')" tappable disabled></ons-tab>
</ons-tabbar>
any help would be appreciated.

In order to get the ons-splitter and ons-tabbar to work together is by using the ons-navigator as the primary nav.
Here's my version of the code based off of Fran Diox post here: https://community.onsen.io/topic/623/trouble-with-tab-splitter-and-navigation-working-together/2
<!-- First navigation component: Navigator. This will remain always on top of the app. -->
<ons-navigator id="myNavigator" page="splitter.html">
</ons-navigator>
<!-- Second navigation component: Splitter. This will disappear if the first component changes its content. -->
<ons-template id="splitter.html">
<ons-splitter>
<ons-splitter-side id="mySplitter" swipeable width="250px" collapse swipe-target-width="50px">
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tabbar.html">
</ons-splitter-content>
</ons-splitter>
</ons-template>
<!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. -->
<ons-template id="tabbar.html">
<ons-page id="tabbarPage">
<ons-toolbar>
<div class="left">
<!-- Toolbar-button with different icons depending on the platform. -->
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Nav, Splitter & Tabs</div>
<div class="right">
</div>
</ons-toolbar>
<!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. -->
<ons-tabbar id="myTabbar" position="auto">
<ons-tab page="tab1.html" label="Tab 1" active>
</ons-tab>
<ons-tab page="tab2.html" label="Tab 2">
</ons-tab>
</ons-tabbar>
<ons-template id="tab1.html">
<ons-page>
<ons-toolbar>
<div class="center">Tab 1</div>
</ons-toolbar>
<p style="text-align: center;">
This is the first tab.
</p>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-page>
<ons-toolbar>
<div class="center">Tab 2</div>
</ons-toolbar>
<p style="text-align: center;">
This is the second tab.
</p>
</ons-page>
</ons-template>
</ons-page>
</ons-template>

Onsen-UI slide navigation error

When I transtion to the person.html page using the 'slide' transition, I get the following error: "Fail to fetch PageView from ons-page element."
I don't get an error when I change the transition from 'slide' to 'fade'.
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
<ons-template id="index.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
People App
</ons-toolbar-button>
</div>
<div class="center">People</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-search" onclick="myNavigator.pushPage('search-global.html', { animation : 'fade' } )"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-more"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<!-- changing 'slide' to 'fade' below removes the error -->
<ons-list class="timeline" modifier="inset">
<ons-list-item class="timeline-li" modifier="tappable" ng-repeat="i in [1,2,3]" ng-click="myNavigator.pushPage('person.html', { animation : 'slide' } )">
<ons-row>
<ons-col width="50px">
<img ng-src="https://placeholdit.imgix.net/~text?txtsize=8&txt=50%C3%9750&w=50&h=50" class="timeline-image">
</ons-col>
<ons-col>
<div class="timline-from">
<span class="timeline-name">My Awesome Friend</span>
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="menu-timeline.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent">
<div class="right">
<ons-toolbar-button class="menu-closeMenu" ng-click="menu.closeMenu()">
</ons-icon>Close
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.closeMenu()">
<ons-icon icon="fa-plus"></ons-icon>
New Person
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="person.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Person Name. </div>
<div class="right">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-android-more-vertical"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Hello. I am Person Name.
</ons-list-item>
<ons-list-item>
If this page appeared using 'slide' then an error resulted.
</ons-list-item>
<ons-list-item>
If it appeared using 'fade' then it should still function fine.
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="search-global.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Search People</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Enter search text" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item style="padding-bottom:8px;padding-top:5px;">
<ons-button modifier="large" onclick="">
Search
</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>
I prefer to use the slide transition because I think it makes navigation look more linear. Does anyone know how I can fix this error?
Here is the CodePen: http://codepen.io/blarney2000/pen/qZoVzW

Basically it just isn't able to find the initial page. If you just wrap the sliding menu inside a page it will be fine. Demo
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
Why it bugs out only for slide is sort of a mystery, but the development of Onsen 1 is already finished, so if it's a bug then it's not very likely to be fixed in version 1. So the solution is just put the page and everything will work. Also if you want you could put the navigator inside the sliding menu if that's what you want. Then you can have ons-sliding-menu > ons-navigator > ons-page.

Onsen and AngularJS: Reload List Item and data

I'm using Onsen UI and AngularJS. But i have this problem.
When i back to page1.html from page2.html how to call any function in page1.html ?
page1.html
<ons-list>
<ons-list-item ng-repeat="user in users" modifier="chevron" class="list-item-container">
content
</ons-list-item>
</ons-list>
<ons-button onclick="Navigator.pushPage('page2.html')">Go Page 2</ons-button>
page2.html
<ons-toolbar>
<ons-back-button>Back</ons-back-button>
</ons-toolbar>
Thanks for answers guys. My problem has solved.
Solution:
http://monaca.mobi/en/blog/lets-make-a-phonegap-app-with-angularjs-onsen-ui/

Please try this example. $scope.$watch is called when you leave or enter in page.
<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<!-- --------------- App init --------------- -->
<title>Onsen UI Split View</title>
</head>
<body>
<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
<!-- -->
<ons-navigator title="Navigator" var="myNavigator">
<ons-page ng-controller="firstctrl">
<ons-toolbar>
<div class="center">Simple Navigation</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button modifier="light" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
Push Page
</ons-button>
</div>
</ons-page>
</ons-navigator>
<ons-template id="page1.html">
<ons-page ng-controller="secondctrl">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
</body>
</html>
<script>
var app = angular.module('app', ['onsen']);
app.controller('firstctrl', function($scope, $http)
{
$scope.$watch(function( $scope )
{
console.log( "Function watched" );
});
});
app.controller('secondctrl', function($scope, $http)
{
});
</script>

onsen-ui ons-back-button not working

I am working with a mobile app in Phongap and Cordova.
I have my index.html page with ons-list and in each item I get redirected to another page.
I'm doing this as follows:
<list-item-ons modifier = "chevron" ng-click = "myNavigator.pushPage ('NewPage.html', {animation: 'slide'})">
In the new page I have an ons-toolbar with ons-back-button that dosn't work. I want to do a popPage() to return to Index.html.
Could someone give me some help with this?
This is my code:
Index.html:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/onsen-css-components.min.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppController">
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="page1.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu"
type="overlay">
</ons-sliding-menu>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">MyAppName</div>
</ons-toolbar>
<div style="width:100%;height:70%">
<ons-list>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 1</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 2</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 3</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 4</div>
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('NewPage.html', { animation : 'slide' })">
<div style=" text-align:center">Item 5</div>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home" size="20px" style="color: #661f7a"></ons-icon>
Home
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-question" size="20px" style="color: #661f7a"></ons-icon>
Help
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-info-circle" size="20px" style="color: #661f7a"></ons-icon>
About My App
</ons-list-item>
</ons-list>
</ons-template>
</ons-navigator>
</body>
</html>
NewPage.html (containing the back button that doesn't work):
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">My New Page</div>
</ons-toolbar>
<div>
<div>
<input class="text-input" id="my-input" placeholder="Enter some Text...">
</div>
<div>
<ons-switch var="mySwitch1"></ons-switch>
</div>
<div>
<select id="select1"></select>
</div>
<div>
<ons-switch var="mySwitch2"></ons-switch>
</div>
<div>
<select id="select2"></select>
</div>
</div>
</ons-page>

<div class="left" onclick="fn.load('home.html')" tappable><ons-back-button>Back</ons-back-button></div>
And in your js file:
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));
};

The declaration of the ons-navigator is wrong, you should put the navigator in your main page. The structure should be something like:
<ons-template id="mainPage.html">
<ons-navigator var="myNav">
<ons-page>
...content...
</ons-page>
</ons-navigator>
</ons-template>
You can find a working CodePen example HERE, hope it helps!

Onsen UI sliding menu

I have a menue like this:
<ons-navigator animation="slide" var="myNavigator">
<ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
Home
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>
after navigating to "link/to/some/other/page.html", I have a $scope.myNavigator.pushPage('anotherpage', {});
operation. This also works.
But after I performed the pushpage operation, I am not able to use the menu any more. I have to do a popPage before.
A page looks like this:
<div ng-controller="someNiceController">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">{{title}}</div>
</ons-toolbar>
My nice content
</ons-page>
</div>
I think there is a problem with the structure of my page...
Any suggestions?

You should put the sliding menu outside the navigator.
The content inside the navigator will be replaced by another page when you push, so the sliding menu in your example will disappear when you use pushPage().
The following code shows how you can use a sliding menu together with a navigator:
<ons-sliding-menu
main-page="main.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.pushPage('page2.html')">Push</ons-button>
</div>
</ons-navigator>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.popPage()">Pop</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable">
Some option
</ons-list-item>
<ons-list-item modifier="tappable">
Another option
</ons-list-item>
</ons-list>
</ons-template>
Here you can see it in action:
http://codepen.io/argelius/pen/ogXGeV

Here's a working sliding menu in Onsen UI. Two changes you should make is to put the sliding-menu element is outside of the navigator, and to reference it with a variable, var="menu". Using a variable simplifies your script. Click below for a simple example.
ons.bootstrap();
<head>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet" />
</head>
<body>
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.pushPage('page2.html')">Next Page</ons-button>
<ons-button onclick="menu.toggleMenu()">Toggle Menu</ons-button>
</div>
</ons-navigator>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.popPage()">Back</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable">
First option
</ons-list-item>
<ons-list-item modifier="tappable">
Second option
</ons-list-item>
</ons-list>
</ons-template>
</body>