@Fran-Diox Problem solved. Thank you!

anderson
@anderson
Web and Android Developer.
Posts made by anderson
-
RE: ons.notification.confirm console error
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>
-
RE: ons.notification.confirm console error
@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:
Is there any solution?
Thank you!
-
RE: ons-splitter menu reveal effect
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>
-
ons.notification.confirm console error
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:
Why is this happen?
Thank you!
-
How to pass data between pages?
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!
-
RE: ons-progress-bar moves the elements down
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>
-
ons-progress-bar moves the elements down
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! -
RE: ons-tabbar tabs problem on destroy
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>