Perform function on closing a page using ons-navigator

dustintinsley

I have a small app that uses ons-navigator to load 3 or 4 different pages. One 1 page load, I run a function to ensure the user is online (has an internet connection) using an event listener. When that page closes, I would like to remove that event listener. How do I run a function on both the user hitting the BACK button or swiping back (this is for iOS)?

gobiyau

Hi,

I have done this in my project before, to avoid user back accidentally.

"ons-back-button: is a component that shows the button and also the action “popPage()”, so we cannot use it. Instead of “<div class=“left”><ons-back-button>Page 1</ons-back-button></div>”, we use the following to draw the back-button.

<div class="back-button" style="display: inline-block;" onclick="showConfirm()">
    <span class="back-button__icon">
        <!--?xml version="1.0" encoding="UTF-8"?-->
        <svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>ios-back-button-icon</title>
            <g id="toolbar-back-button" stroke="none" stroke-width="1" fill-rule="evenodd">
                <g id="ios" transform="translate(-34.000000, -30.000000)">
                    <polygon id="ios-back-button-icon" points="34 40.5 44.5 30 46.5 32 38 40.5 46.5 49 44.5 51"></polygon>
               </g>
           </g>
       </svg>
    </span>
    <span class="back-button__label" style="">Page 1</span>
</div>

We have to write the back-button function by ourselves, we call it “showConfirm()”. Ask your confirmation before popPage().

var showConfirm = function() {
    ons.notification.confirm({
        message: 'Are you sure to exit?',
        buttonLabels: ['Yes', 'No'],
        primaryButtonIndex: 1,
        callback: function(i) {
            if (i === 0) {
                 document.querySelector('#myNavigator').popPage()
            } else {
                ons.notification.alert('You have cancelled back to page 1');
            }
        }
    })
};

So when you press the back button, it will show a dialog to have your confirmation, if you press ‘yes’, then it will go back to page 1.

Best Regards
Gobi