Confirmation Window On Navigating Away From Page With AJAX

Question

I have a question regarding navigating away from page that im currently working on. So my general structure is like this,

I have a main page componentmanagement.php that has the loader with function such as,

<li>
                            <a onclick="component('MONITOR')" style="cursor: pointer;">
                                <i class="fa fa-exchange"></i> <span>Component Monitor</span>
                            </a>
                        </li>
                        <li>
                            <a onclick="component('LIST')" style="cursor: pointer;">
                                <i class="fa fa-power-off" style="color: #D90005;"></i> <span>List Component</span>
                            </a>
                        </li>

            <aside class="right-side">
                <!-- Content Header (Page header) -->

                <!-- Main content -->
                <section class="content" id="maincontent"></section><!-- /.content -->

            </aside><!-- /.right-side -->

and the loading function is like this,

 function component(param) {
                                    var job = $("#job").val();
                                    var subjob = $("#subjob").val();
                                    switch (param) {
                                        case "MONITOR":
                                            $.ajax({
                                                type: 'POST',
                                                url: "divpages/monitorcomponent.php",
                                                beforeSend: function (xhr) {
                                                    $('#maincontent').html();
                                                },
                                                success: function (response, textStatus, jqXHR) {
                                                    $('#maincontent').html(response);
                                                }
                                            });
                                            break; // END OF CASE

                                        case "LIST":
                                            $.ajax({
                                                type: 'POST',
                                                url: "divpages/listcomponent.php",
                                                data: {job:job, subjob:subjob},
                                                beforeSend: function (xhr) {
                                                    $('#maincontent').html();
                                                },
                                                success: function (response, textStatus, jqXHR) {
                                                    $('#maincontent').html(response);
                                                }
                                            });
                                            break; // END OF CASE }}

My question is how to implement confirmation before leaving page with such kind of structure. I am able to program it if im using href. Please help me on this case. lets say i am on MONITOR now but when user accidentally clicked log out or click close on the browser, confirmation should appear..

Thanks in advance for the help.

Answer 1

As your site seem to be ajax driven, the page isn't really unloaded, so the regular onunload won't work, you need to manually pop up a confirm dialog and ask the user if he/she wants to leave etc.

Something like

function component(param) {
    if ( confirm("Are you sure you want to leave this magnificent page ?") ) {
        var job = $("#job").val();
        var subjob = $("#subjob").val();
        switch (param) {
            case "MONITOR":
                $.ajax({
                    type: 'POST',
                    url: "divpages/monitorcomponent.php",
                    beforeSend: function (xhr) {
                        $('#maincontent').html();
                    },
                    success: function (response, textStatus, jqXHR) {
                        $('#maincontent').html(response);
                    }
                });
                break; // END OF CASE

            case "LIST":
                $.ajax({
                    type: 'POST',
                    url: "divpages/listcomponent.php",
                    data: {
                        job: job,
                        subjob: subjob
                    },
                    beforeSend: function (xhr) {
                        $('#maincontent').html();
                    },
                    success: function (response, textStatus, jqXHR) {
                        $('#maincontent').html(response);
                    }
                });
                break; // END OF CASE }}
        }
    }
}

Answer 2

You can use window.onbeforeunload event to achieve this like below.

window.onbeforeunload = function() {
    return 'You are leaving the page!';
};