Error while closing Modal Dialog (JavaScript)

Question

So I create a Modal Dialog with this code:

function openModalDialog(title, url, callback) {
    var options = {
        title: title,
        url: url,
        dialogReturnValueCallback: callback
    };

    SP.UI.ModalDialog.showModalDialog(options);
}

and on the dialog I've got a button which closes it with this code:

function setAllProperties(listname) {
    var heads = $("#ServiceHeadPicker").val();
    var service = $("#ServicePicker").val();
    var users = $("#UsersPicker").val();
    var readers = $("#ReadersPicker").val();

    if (heads == "" || service == "" || users == "" || readers == "") {
        alert("Fill all fields before you save.");
    }
    else {
        breakRoleInheritance(listname, function (result) {
            if (result) {
                var keys = ["ServiceHeadGroup", "ServiceGroup", "UsersGroup", "ReadersGroup"];
                var values = [heads, service, users, readers];

                setWebProperties(keys, values, Completed);

                function Completed(saved) {
                    if (saved) {
                        SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Saved');
                    }
                    else {
                        alert("Saving error.");
                    }
                }

            }
            else alert("Inheritance breaking error");
        });
    }
}

It all works fine... kind of. When I exit the dialog with X in the corner it just closes. When I click my Save button it raises two exceptions (first in MicrosoftAjax.js, second in init.js):

Unhandled exception at line 5, column 84394 in http://appspfx-aefd1c8644ea50.it-devapps.testing/ScriptResource.axd?d=ZlZ9R9DNo60022OO98q1y17MwlqBkyPkTDvgCxwvpJt5xgqmYCetXWyvwsM-rCcAgJU3komt7iYrzO5ABE6-QQ6XRtzkAM0PF-g_i7feKaRUK1v5Sux9QZekMm-u-jrTGDIyOdVTxEMT1lNmcOKu89LKX2T1RaoMwV2jWswC_TR1lAnJgdLkiNAWA3d4H2Sv0&t=348b0da

0x800a138f - JavaScript runtime error: Unable to get property 'emptyMethod' of undefined or null reference

and the second one:

Unhandled exception at line 1, column 24446 in http://appspfx-aefd1c8644ea50.it-devapps.testing/_layouts/15/init.js?rev=/WTxr8UesytJ8GB/5hOwZA==

0x800a138f - JavaScript runtime error: Unable to get property 'caller' of undefined or null reference

So my question is: what do you think might be the cause and how can I fix it?

Answer 1

I figured it out finally. A Modal Dialog cannot be closed from an async method. To fix the problem I wrote this piece of code:

var IsQueryFinished = false; //those two variables you should change in your async method
var ErrorOccured = false;

function waitAndCloseDialog() {
    if (IsQueryFinished && !ErrorOccured) {
        SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Saved');
    } else if (!ErrorOccured) {
        setTimeout(waitAndCloseDialog, 100);
    }
}