卸载前确认对话框

Question

Hi I have read lots of other posts on the subject but am still confused. I just want to achieve 2 simple things before my page is unloaded.

1. If there is any unsaved data save it. Ask yes/no to save it (using confirm())
2. Save current selections on the page

I am doing it as follows.

window.onbeforeunload = function (e) {


    var model = _selectedClassNodes + ";" + _selectedIndicatorNodes + ";" + _selectedNode + ";" + _pageHeaderId;

    $.ajax({
        url: "@Url.Action("SaveDefaultSettings", "Maps")",
        type: 'get',
        data: { defaultSettings: model },
        success: function (data) {


        }
    });

    //if some unsaved data exists
    if (editedRows.length > 0) {

        if (confirm("Do you wish to save changes before continuing? CLick 'OK' for 'Yes' and 'Cancel' for 'No'")) {
            SaveGridData();
        }
    }


};

The SaveDefaultSettings is always fired as i have debugged with a break point but no confirm box appears.

As far as I remember confirm() was working ok before but today I noticed it has stopped working. I am using chrome v 62.0

If I change my code to

 window.onbeforeunload = function (e) {

    return "Do you wish to save changes before continuing? CLick 'OK' for 'Yes' and 'Cancel' for 'No'";

    var model = _selectedClassNodes + ";" + _selectedIndicatorNodes + ";" + _selectedNode + ";" + _pageHeaderId;

    $.ajax({
        url: "@Url.Action("SaveDefaultSettings", "Maps")",
        type: 'get',
        data: { defaultSettings: model },
        success: function (data) {



        }
    });
 };

Instead now a default dialog says "Changes you made may not be saved" Reload/Don't Reload

Answer 1

From MDN Web docs

If a string is assigned to the returnValue Event property, a dialog appears asking the user for confirmation to leave the page (see example below). Some browsers display the returned string in the dialog box, but others display their own message.

That is why I am seeing a different message instead of the one I am returning.

The point that I mentioned it was working before was a confusion because same confirm dialog message is being used at another button click too.

My final code is

window.onbeforeunload = function (e) {


    var model = _selectedClassNodes + ";" + _selectedIndicatorNodes + ";" + _selectedNode + ";" + _pageHeaderId;

    $.ajax({
        url: "@Url.Action("SaveDefaultSettings", "Maps")",
        type: 'get',
        data: { defaultSettings: model },
        success: function (data) {



        }
    });

    //if some unsaved data exists
    if (editedRows.length > 0) {
        return "There are some changes in grid data. You need to click 'Save Changes' or 'Cancel Changes' button on grid before continuing.";
    }


};