10

My app contain ons-dialog on a imageclick that opens image in a dialog.But I am unable to handle hardware device back button.It is showing error of 'Capturing Back button handler is failure.So how to do it???Please help.

Code :

<ons-template id="ImagePopup.html">

  <ons-dialog style="height:100%;width:100%;background:#000000;" var="naviDialog" cancelable ng-device-backbutton="click();" animation="fade" true> 
     <img id="PopImg" style="height:50%;width:100%;padding-top:30%">

  </ons-dialog> 

</ons-template>
Zen Bhatt
  • 310
  • 5
  • 21

5 Answers5

9

I had the same problem when using the dialog component from within an ons-navigator object. In order to make it work, I had to disable the default back button handler of the dialog and have the Navigator object handle it instead.

Here is the code I made, hope it helps:

ons.createDialog('dialogs/yourDialog.html').then(function(dialog) {
    dialog.getDeviceBackButtonHandler().disable();

    var f = function(event) {
        dialog.hide();
        myNavigator.getDeviceBackButtonHandler().setListener(function(event) { 
            try{
                myNavigator.popPage(); 
            }
            catch (err){
                event.callParentHandler();
            }
        });
    } 
    myNavigator.getDeviceBackButtonHandler().setListener(f);
    dialog.show({parentScope: $scope});
});

Brief explanation:

  • Disable dialog back button handler (this is what is causing errors)
  • When disabled, the back button will be handled by the next node that has a back button handler (myNavigator, in this case) that works fine.
  • Change the event listener of myNavigator when the dialog is shown, to hide the dialog.
  • After hiding it, I try to restore its default functionality. It´s a Navigator object, so popPage should be the default action, and, if the page stack is empty (what throws an error) we will call the parent handler (that will, usually, get you out of the app)
sergio0983
  • 1,232
  • 8
  • 15
  • You Sir, take a bow :) Has someone ever told you how awesome you are? Well, I'm telling that. Thank you so much. This worked like a charm :) – Rohit Jain Sep 04 '15 at 17:32
2

The default deviceButton behavior for dialog is hiding. In order to change it you can do it in this way:

ons.bootstrap().controller('MyController', function($scope) {
    $scope.hideDialog = true;
    $scope.changeMode = function() {
        $scope.hideDialog = !$scope.hideDialog;
        if ($scope.hideDialog) {
            console.log('now hiding');
            $scope.dialog.getDeviceBackButtonHandler().setListener(function() { $scope.dialog.hide();});
        } else {
            console.log('now printing');
            $scope.dialog.getDeviceBackButtonHandler().setListener(function() { console.log('hey!');});
        }
    };

    ons.ready(function() {
        ons.createDialog('dialog.html').then(function(dialog) {});
    });
});

And this is the example HTML:

<body ng-controller="MyController"> 
    <ons-template id="dialog.html">
      <ons-dialog var="dialog" cancelable>
        <p>Mode: {{ hideDialog ? "Hide Dialog" : "ConsoleLog Hey" }}</p>
        <p><ons-button ng-click="changeMode()">Change Mode</ons-button></p>
      </ons-dialog>
    </ons-template>

    <ons-page>
        <p><ons-button ng-click="dialog.show()">Show Dialog</ons-button></p>
    </ons-page>
</body>

I just tested that in Onsen UI 1.3.8 and Monaca, seems working well.

Hope it helps!

Fran Dios
  • 3,482
  • 2
  • 15
  • 26
  • Hi, I tried with onsen ui 1.3.8, and the error is there. Capture back-button failure. Sorry for taking so long, have been stuck in other releases. I tried putting the device back button handler listener change code inside the callback function of `ons.createDialog()`, it didn't help either. – Rohit Jain Sep 04 '15 at 09:27
  • I'm testing this in cordova phonegap app, BTW. – Rohit Jain Sep 04 '15 at 09:28
0

I had a similar error, but I used the destroy function and it worked correctly. I show an example, I hope it helps.

dialog.destroy();

<ons-template id="navigator.html">
    <ons-dialog style="height: 80%;" var="naviDialog" cancelable ng-controller="ShowNotiController">
        <ons-navigator var="myNav">
            <ons-toolbar inline>
                <div class="center">
                    {{ "sLang_notifications_Data" | sLang }} {{ data}}
                </div>
            </ons-toolbar>
            <div style="text-align: center">
                <p>
                <strong>{{ "sLang_notifications_Subject" | sLang }}</strong> {{ subject | htmlToPlaintext }}
                </p>
                <p>
                <strong>{{ "sLang_notifications_Message" | sLang }}</strong>{{ message | htmlToPlaintext }}
                </p>
                <p>
                <ons-button onclick="naviDialog.destroy();"> {{ "sLang_notifications_Close" | sLang }}</ons-button>
                <ons-button onclick="myNav.pushPage('next.html')">Next</ons-button>
                </p>
            </div>
        </ons-navigator>
    </ons-dialog>
</ons-template>
Jordi Alonso
  • 1
0

this works for me

 onDeviceReady: function() {
    this.receivedEvent('deviceready');
    document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
 if(document.querySelector('ons-modal').visible){
   document.querySelector('ons-modal').hide();
  e.preventDefault();
 }}
Alfarouq
  • 173
  • 1
  • 6
0

Just to update anyone here recently. I've had the same issue described, but discovered a "disabled" feature now for the dialog. So, I have the dialog set to disable this once a user has acknowledged the popup.

It would seem like you could use this from other pages to disable the dialog as well.

function hideDialog(id) {
    document.getElementById(id).hide();
    document.getElementById(id).disabled = true;
};


<ons-dialog id="some-dialog">
    <div class="disclaimer-text-wrap">Lorem Ipsum</div>
    <div class="disclaimer-button-wrap">
        <ons-button onclick="hideDialog('some-dialog');">Close</ons-button>
    </div>
</ons-dialog>
gregcruce
  • 21
  • 4