ons.notification.confirm console error

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!

munsterlander

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

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

Fran Diox

@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.

anderson

@Fran-Diox Problem solved. Thank you!