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.

Possible duplicate of [How to show the "Are you sure you want to navigate away from this page?" when changes committed?](http://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch) — Kesavamoorthi, Oct 12 '15 at 02:52
So basically you want to know how to do this with your ajax driven webpage? It's as easy as adding a `confirm()` to your event handlers. — adeneo, Oct 12 '15 at 02:58
thanks @adeneo. Can you post it as an answer so i can accept it as an answer as well ? — Konz Mama, Oct 12 '15 at 03:19

score 1 · Answer 1 · answered Oct 12 '15 at 02:46

1

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

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

answered Oct 12 '15 at 02:46

Kesavamoorthi

959
2
11
21

tried this but doesnt work, i add your code just before the switch and it doesnt work,.. – Konz Mama Oct 12 '15 at 03:16
1

Place it outside your function to register it globally. – Kesavamoorthi Oct 12 '15 at 03:17

score 1 · Accepted Answer · answered Oct 12 '15 at 03:25

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 }}
        }
    }
}

Confirmation Window On Navigating Away From Page With AJAX

2 Answers2