Monaca Onsen UI Discord Chat Github Repo

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:
    0_1487524085558_Screen Shot 2017-02-19 at 18.07.45.png

    Why is this happen?

    Thank you!



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



  • @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!



  • 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>
    

  • Onsen UI

    @anderson Hey! When a notification is canceled (by tapping the background if you use option.cancelable) it rejects its promise. You can do:

    ons.notification.confirm(...).then(resolvedCallback).catch(rejectedCallback);

    I think we should modify this behavior and always resolve the promise with -1 or something like that instead.



  • @Fran-Diox Problem solved. Thank you!