anderson

anderson

@Fran-Diox Problem solved. Thank you!

anderson

I also tried without callback: function(idx) but it does not work

<!doctype html>
<html lang="en" ng-app="my-app">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>

</head>
<body>
	<ons-navigator var="navegador" page="main.html"></ons-navigator>

	<ons-template id="main.html">
		<ons-page ng-controller="AppController">
	    	<ons-button ng-click="remove()">REMOVE</ons-button>
		</ons-page>
	</ons-template>
	

	<script type="text/javascript">
	var app = angular.module('my-app', ['onsen']);

	app.controller('AppController', function($scope) {

	    $scope.remove = function(){
	    	ons.notification.confirm({
	    		title: 'Remove',
	    		message: 'Remove?',
	    		buttonLabels: ['YES', 'CANCEL'],
	    		cancelable: true,
	    	}).then(function(idx) {
	    		switch (idx) {
	    			case -1:
	    				console.log("tap the background");
	    				break;
	    			case 0:
	    				console.log("REMOVE OK");
	    				break;
	    			case 1:
	    				console.log("REMOVE NO");
	    				break;
	    		}
	    	});
	    }

 	});
	</script>

</body>
</html>

anderson

@munsterlander said:

Have you tried -1 in your case statement to see if this resolves it or have a default statement?

I tried, but it does not work.

<!doctype html>
<html lang="en" ng-app="my-app">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>

</head>
<body>
	<ons-navigator var="navegador" page="main.html"></ons-navigator>

	<ons-template id="main.html">
		<ons-page ng-controller="AppController">
	    	<ons-button ng-click="remove()">REMOVE</ons-button>
		</ons-page>
	</ons-template>
	

	<script type="text/javascript">
	var app = angular.module('my-app', ['onsen']);

	app.controller('AppController', function($scope) {

	    $scope.remove = function(){
	    	ons.notification.confirm({
	            title:'Remove',
	            message: 'Remove?',
	            buttonLabels: ['YES', 'CANCEL'],
	            cancelable: true,
	            callback: function(idx) {
	                switch (idx) {
	                case -1:
	                	console.log("tap the background");
	                	break;
	                case 0:
	                    console.log("REMOVE OK");
	                    break;
	                case 1:
	                    console.log("REMOVE NO");
	                    break;
	                }
	            }
        	});
	    }

 	});
	</script>

</body>
</html>

Console:
0_1487604900039_Screen Shot 2017-02-20 at 16.33.32.png

Is there any solution?

Thank you!

anderson

I have read the documentation but it says nothing of the “type” attribute in the ons-splitter/ons-splitter-side element

I have tried it but it does not work:

<!doctype html>
<html lang="en" ng-app="my-app">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>

</head>
<body>

	<ons-navigator var="navegador" page="main.html"></ons-navigator>

	<ons-template id="main.html">
		
		<ons-splitter var="mySplitter" ng-controller="SplitterController as splitter">
		  <!-- TYPE: overlay - push - reveal -->
		  <ons-splitter-side side="left" width="220px" collapse swipeable type="push">
		    <ons-page>
		      <ons-list>
		        <ons-list-item ng-click="splitter.load('home.html')" tappable>
		          Home
		        </ons-list-item>
		      </ons-list>
		    </ons-page>
		  </ons-splitter-side>
		  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
		</ons-splitter>
	</ons-template>

	<ons-template id="home.html">
	  <ons-page>
	    <ons-toolbar>
	      <div class="left">
	        <ons-toolbar-button ng-click="mySplitter.left.open()">
	          <ons-icon icon="md-menu"></ons-icon>
	        </ons-toolbar-button>
	      </div>
	      <div class="center">
	        Main
	      </div>
	    </ons-toolbar>
	    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
	      HOME
	    </p>
	  </ons-page>
	</ons-template>

	<script type="text/javascript">
		var app = angular.module('my-app', ['onsen']);

		app.controller('SplitterController', function($scope) {
			this.load = function(page) {
				content.load(page).then(function() {
					mySplitter.left.close();
				});
			}

	 	});
	</script>

</body>
</html>

anderson

Hello,
I am using on.notification.confirm and it shows an error in console when I tap the background.

<!doctype html>
<html lang="en" ng-app="my-app">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>

</head>
<body>
	<ons-navigator var="navegador" page="main.html"></ons-navigator>

	<ons-template id="main.html">
		<ons-page ng-controller="AppController">
	    	<ons-button ng-click="remove()">REMOVE</ons-button>
		</ons-page>
	</ons-template>
	

	<script type="text/javascript">
	var app = angular.module('my-app', ['onsen']);

	app.controller('AppController', function($scope) {

	    $scope.remove = function(){
	    	ons.notification.confirm({
	            title:'Remove',
	            message: 'Remove?',
	            buttonLabels: ['YES', 'CANCEL'],
	            cancelable: true,
	            callback: function(idx) {
	                switch (idx) {
	                case 0:
	                    console.log("REMOVE OK");
	                    break;
	                case 1:
	                    console.log("REMOVE NO");
	                    break;
	                }
	            }
        	});
	    }

 	});
	</script>

</body>
</html>

Console:
0_1487524085558_Screen Shot 2017-02-19 at 18.07.45.png

Why is this happen?

Thank you!

anderson

@Fran-Diox Thank you! :+1:

anderson

How can you pass data between pages in ONSENUI v2.1.0?

(I have read the documentation)

My code:

<!doctype html>
<html lang="en" ng-app="my-app">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>

</head>
<body>
	<ons-navigator var="navegador" page="example.html"></ons-navigator>

	<ons-template id="example.html">
		<ons-page ng-controller="exampleController">
			<ons-toolbar>
			<div class="center">
				Home
			</div>
			</ons-toolbar>
			<ons-list>
		    	<ons-list-item modifier="longdivider" tappable ng-click="editUser(nombre)">
		    		<div class="center">
		    			<ons-input type="text" placeholder="Name" ng-model="name"></ons-input>
		    		</div>
		    	</ons-list-item>
			</ons-list>
			<div style="text-align:center">
			<ons-button ng-click="save(name)">SAVE</ons-button></p>
			</div>
		</ons-page>
	</ons-template>

	<ons-template id="user.html">
		<ons-page ng-controller="UserController">
		<ons-toolbar>
			<div class="left">
				<ons-back-button>Atras</ons-back-button>
			</div>
			<div class="center">
				User
			</div>
		</ons-toolbar>
		<p>User: {{username}}</p>
		</ons-page>
	</ons-template>
	

	<script type="text/javascript">
	var app = angular.module('my-app', ['onsen']);
	app.controller('exampleController', function($scope) {
		$scope.save= function(name){
			options = {
	            data: {
	                name:name
	            }
	        };
	        $scope.navegador.pushPage("user.html",options);
		}
	});

	app.controller('UserController', function($scope) {

		//var user = navegador.topPage.data.user;
		var user = $scope.navegador.topPage.data.user;
		$scope.username=user;
		console.log(user);
	});
	</script>

</body>
</html>

Thanks!

anderson

I’ve solved it.
Just put the visibility property in the element <ons-progress-bar>

<!doctype html>
<html lang="en" ng-app="my-app">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>

</head>
<body>
	<ons-page ng-controller="ExampleController">
		<ons-toolbar>
		<div class="left">
			<ons-back-button>Atras</ons-back-button>
		</div>
		<div class="center">
			Hello
		</div>
		</ons-toolbar>
		<ons-progress-bar id="bar" indeterminate style="visibility: hidden;"></ons-progress-bar>
		<div style="text-align:center">
			<p><ons-input modifier="underbar" type="text" placeholder="Name" float></ons-input></p>
			<p><ons-button ng-click="showProgress()">Button</ons-button></p>
		</div>
	</ons-page>

	<script type="text/javascript">
	var app = angular.module('my-app', ['onsen']);
	app.controller('ExampleController', function($scope) {
		$scope.showProgress = function(){
			var element = document.getElementById("bar");
			element.setAttribute("style", "visibility: visible;");
		}
	});
	</script>

</body>
</html>

anderson

I have a little problem. When I show <ons-progress-bar>, the elements then move 1px down.
I’m using the ng-show attribute with AngularJS 1.6.1.

<!doctype html>
<html lang="en" ng-app="my-app">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>

</head>
<body>
	<ons-page ng-controller="ExampleController">
		<ons-toolbar>
		<div class="left">
			<ons-back-button>Atras</ons-back-button>
		</div>
		<div class="center">
			Hello
		</div>
		</ons-toolbar>
		<ons-progress-bar indeterminate ng-show="loading"></ons-progress-bar>
		<div style="text-align:center">
			<p><ons-input modifier="underbar" type="text" placeholder="Name" float></ons-input></p>
			<p><ons-button ng-click="showProgress()">Button</ons-button></p>
		</div>
	</ons-page>

	<script type="text/javascript">
	var app = angular.module('my-app', ['onsen']);
	app.controller('ExampleController', function($scope) {
		$scope.showProgress = function(){
			$scope.loading=true;
		}
	});
	</script>

</body>
</html>

Why is this happen?
Thank you!

anderson

Hi quince,

I have removed the “content” class from the div element (<div class = “content”>) and it works.
Apparently the <ons-tabbar> element cannot be the child of a class element “content”.

<!doctype html>
<html lang="en">
<head>
	<title>App</title>
	<meta charset="utf-8">

	<!-- ONSENUI v.2.1.0 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>

</head>
<body>
	<ons-page>
		<ons-toolbar style="background-color:#000;">
			<div class="left">
				<ons-toolbar-button ng-click="app.menu.toggleMenu()">
				<ons-icon icon="md-menu"></ons-icon>
			</ons-toolbar-button>
			</div>
			<div class="center toolbarText">Products</div>
		</ons-toolbar>
		<!--<div class="content" style="text-align: center">-->
		<div class="" style="text-align: center">
		<ons-tabbar>
			<ons-tab label="Products1" page="tab1.html" active></ons-tab>
			<ons-tab label="Products2" page="tab2.html"></ons-tab>
			<ons-tab label="Products3" page="tab3.html"></ons-tab>
			<ons-tab label="Products4" page="tab4.html"></ons-tab>
			<ons-tab page="tab5.html" icon="ion-ios-cart-outline"></ons-tab>
		</ons-tabbar>
		</div>
	</ons-page>

	<ons-template id="tab1.html">
		<ons-page id="tab1">
		TAB 1
		</ons-page>
	</ons-template>

	<ons-template id="tab2.html">
		<ons-page id="tab2">
		TAB 2
		</ons-page>
	</ons-template>

	<ons-template id="tab3.html">
		<ons-page id="tab3">
		TAB 3
		</ons-page>
	</ons-template>

	<ons-template id="tab4.html">
		<ons-page id="tab4">
		TAB 4
		</ons-page>
	</ons-template>

	<ons-template id="tab5.html">
		<ons-page id="tab5">
		TAB 5
		</ons-page>
	</ons-template>

</body>
</html>

anderson

@anderson

Posts made by anderson