2

I created a panel using jqm, and I'd like to be able to use the andoird phones back button to close it when it's open.

For now, when the panel is open and I use the back button, it goes to the previous page, instead of only closing the panel.

Any idea how to do this ? Here's my html page with the panel :

<div id="welcome-page" data-role="page">    
    <a data-role="button" id="open-panel" data-theme="a">Enquiries</a>
</div>

Here's the structure of my js file for the panel : 

$(document).on('pagebeforecreate', '#welcome-page', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
    $(document).on('click', '#open-panel', function(){   
        $.mobile.activePage.find('#mypanel').panel("open");
        populateContactForm('args');
        ...
    }); 
    $(document).on('change', '#mypanel input[type=radio]', function(){ 
    ...
    });
});


$(document).on('pagebeforeshow', function() {   
  $(document).bind('keydown', function(event) {
    alert(event.keyCode);
    if (event.keyCode == 27) {
      event.preventDefault();
      $('#mypanel').panel("close");
    }
  });
});

Thanks

Louis
  • 2,548
  • 10
  • 63
  • 120

1 Answers1

1

You can capture hardware back button as below in javascript:

$(document).bind('keydown', function(event) {
  if (event.keyCode == 27) {
    // Prevent default (disable the back button behavior)
    event.preventDefault();

    // Your code to close panel or show another page or whatever...
    $( '#mypanel' ).panel( "close" );
  }
});
Louis
  • 2,548
  • 10
  • 63
  • 120
Butani Vijay
  • 4,181
  • 2
  • 29
  • 61
  • thanks but I don't know where to put it in my js file. Should I put it within the `$(document).on('click', '#open-panel', function(){` ? or just in the  `$(document).on('pagebeforecreate', '#welcome-page', function(){ ` ? I tried both and it doesn't seem to work... – Louis Aug 17 '13 at 13:02
  • you can create document **ready** event and then add my code inside it for best practice. – Butani Vijay Aug 17 '13 at 13:06
  • Isn't it best practive to use page events instead of document ready with jqm ? I would like this override to be active only when the panel is open. – Louis Aug 17 '13 at 13:10
  • you can check it when back button is press – Butani Vijay Aug 17 '13 at 13:11
  • What do you mean. Please I need the specific location where to put this js snippet. thanks. I tried into the on click, into the on pagebeforecreate, and out, and it doesn't work. – Louis Aug 17 '13 at 13:50
  • How can I check this without using `alert` which doesn't seem to work on android? – Louis Aug 17 '13 at 14:30
  • is it possible to test this in a js fiddle, with the android back button? – Louis Aug 17 '13 at 17:21
  • no you can not check in jsfiddle. but if you want to test you can write some message in your page i.e. $("div").html("back button clicked"); – Butani Vijay Aug 18 '13 at 04:05
  • Thanks. Ok I see, even with this to test, I can't capture the back button. I am trying this snippet I added in the question but it doesn't work. Please help. – Louis Aug 22 '13 at 07:17
  • moreover, when I test my app on my laptop's firefox, the ESC key (which keycode is also 27) closes the panel, whereas the back button on android does not... – Louis Aug 22 '13 at 07:33
  • Refer this link may be help to you : http://docs.phonegap.com/en/2.9.0/cordova_events_events.md.html#backbutton – Butani Vijay Aug 22 '13 at 12:08
  • key 27 is escape, this is not the same as the android back button. – Ed_ Nov 04 '14 at 13:16