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!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons.notification.confirm console error