Modal dialog window UI won't load before code behind

Question

I have become onto a problem, where my Modual dialog window won't load it's UI before the code behind executes. But once the code behind executes, then the UI won't load until code has executed and basically there is no need to hold that dialog open anymore.

I call that modal dialog with Ribbon Button.

What I have tried:

I have tried to call code behind function with JS (Ajax) and all I get is not found in console log.

function callCode() {
        $.ajax({
            type: "POST",
            url: 'MyPage.aspx/MethodName',
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                console.log(msg);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Other thing, that I tried, was to make a hidden button and to click it, but since it takes so long to load UI, JS won't find that button and returns null.

I have tried to set timer in code itself, that I would wait for a certain time, before executing rest of the code, but still, UI keeps plank.

I managed to execute like I (almost) needed by clicking the button myself, but once I clicked it, then the execution started and UI didn't add items (even JS), that I would like to display for the user.

I really hope, that my problem is understandable and appreciate any kind of help! :)

Answer 1

Here's an example of loading a modal and then closing it after some work has finished.

$(document).ready(function(){
    ExecuteOrDelayUntilScriptLoaded(waitModal, "SP.js");    
})
function waitModal(){
    var waitModal = SP.UI.ModalDialog.showWaitScreenWithNoClose("Working on it...", "");    

    $.when(doWork()).done(function(){
        waitModal.close();
    });     
}
function doWork(){
    var dfd = $.Deferred()
    setTimeout(function(){
        //alert('hello');
        dfd.resolve();
    },1000);
    return dfd.promise();
}