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!


Log in to reply