After displaying the Monaca Onsen UI dialog, pressing the Back button causes "Capturing backbutton-handler is failure."

In the Monaca Onsen UI, if you use ons-dialog to display a dialog and press the return button for the Android Monaca debugger, the log will show "Capturing backbutton-handler is failure." and the dialog will not close.
Incidentally, the dialog seems to close successfully after commenting out ons-navigator, but page1-page2 screen transition does not work.

Is there any good way?
Thank you for your cooperation.

<!DOCTYPE HTML>
<html>
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
        function showDialog(){
            ons.createDialog("dialog.html").then(
                function(dialog){
                    dialog.show();
                });
        }
    </script>
</head>
<body>
    <ons-navigator var="myNavigator">
        <ons-page>
            <ons-toolbar>
                <div class="center">Page1</div>
            </ons-toolbar>
            <div style="text-align:center">
                <br>
                <ons-button onclick="showDialog()">Show dialog</ons-button>
                <br>
                <br>
                <ons-button onclick="myNavigator.pushPage('page2.html')">Show page2</ons-button>
            </div>
        </ons-page>

        <ons-template id="page2.html">
            <ons-page var="page2">
                <ons-toolbar>
                    <div class="center">Page2</div>
                </ons-toolbar>
                <div style="text-align:center">
                    <br>
                    <ons-button onclick="myNavigator.popPage()">Show page1</ons-button>
                </div>
            </ons-page>
        </ons-template>

        <ons-template id="dialog.html">
            <ons-dialog var="dialog" cancelable>
                <ons-toolbar fixed-style inline>
                    <div class="center">Dialog</div>
                </ons-toolbar>
                <div style="text-align:center">
                    <br>
                    How are you?
                </div>
            </ons-dialog>
        </ons-template>
    </ons-navigator>
</body>
</html>

monaca onsen-ui

2022-09-30 14:40

1 Answers

I solved myself.
Disable the return button handler before displaying the dialog and enable it when you close it.

<!DOCTYPE HTML>
<html>
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
        function showDialog(){
            ons.createDialog("dialog.html").then(
                function(dialog){
                    myNavigator.getDeviceBackButtonHandler().disable();
                    dialog.show();
                    dialog.on("posthide",
                        function(){
                            myNavigator.getDeviceBackButtonHandler().enable();
                        });
                });
        }
    </script>
</head>
<body>
    <ons-navigator var="myNavigator">
        <ons-page>
            <ons-toolbar>
                <div class="center">Page1</div>
            </ons-toolbar>
            <div style="text-align:center">
                <br>
                <ons-button onclick="showDialog()">Show dialog</ons-button>
                <br>
                <br>
                <ons-button onclick="myNavigator.pushPage('page2.html')">Show page2</ons-button>
            </div>
        </ons-page>

        <ons-template id="page2.html">
            <ons-page var="page2">
                <ons-toolbar>
                    <div class="center">Page2</div>
                </ons-toolbar>
                <div style="text-align:center">
                    <br>
                    <ons-button onclick="myNavigator.popPage()">Show page1</ons-button>
                </div>
            </ons-page>
        </ons-template>

        <ons-template id="dialog.html">
            <ons-dialog var="dialog" cancelable>
                <ons-toolbar fixed-style inline>
                    <div class="center">Dialog</div>
                </ons-toolbar>
                <div style="text-align:center">
                    <br>
                    How are you?
                </div>
            </ons-dialog>
        </ons-template>
    </ons-navigator>
</body>
</html>

2022-09-30 14:40

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656