synchronous ajax call - show div before call

Question

I need to make a div that covers my entire screen be displayed before an sync ajax call.

But it seems that absolutely nothing I try to do causes the DOM to be modified to show this div before the ajax call. The screen gets "frozen" and the div is showed only after the ajax call is executed.

I have already tried "thousands" of approaches but nothing seems to make ajax run only after the DOM is modified (shows the div).

HTML

[...]
<body>
    <div id="loadingDiv" style="display: none; width: 100%; height: 100%; background-color: #004000; position: absolute; z-index:10000;"></div>
[...]

javascript

[...]
$("#loadingDiv").css("display", "block");
var ajaxOp;
$.ajax({
    type: someType,
    url: someUrl,
    data: someData,
    dataType: someDataType,
    async: false,
    success: function (someArg) {
        ajaxOp = someArg;
    },
    error: function (someArg0, someArg1, someArg2) {
        // do something
    }
});
return ajaxOp;
[...]

NOTE I: I'm using JQuery.
NOTE II: "ajaxOp" can not be "undefined".

UPDATE: In the hope that it helps the understanding and at the request of @Felipe Dutra Ferreira I put some more explanations about the issue in the update below...

THE REAL CASE: I have an application with several legacy codes that consume a libray js with a function that, in turn, makes ajax calls (let's call it "certainfunction"). We are trying to update this application so that it displays a "loading screen" during ajax calls (not just "lock" the UI during these calls). So the simplest way to handle this problem is display the "loading screen" just after the calls to "certainfunction" and before it runs the ajax calls. Note also that "certainfunction" returns the output from the ajax call and this output will be "undefined" once this call is not executed synchronously, that is, the code can only continue after this ajax call has an output.

Just wrap `$( document ).ready(function() { YOUR CODE });` around it? This will execute the javascript after the DOM is finished loading. More on that on the docs: [jQuery Document Ready](https://learn.jquery.com/using-jquery-core/document-ready/) — icecub, Mar 19 '19 at 03:03
The ajax runs after the page loads, using a button click, for example. — Eduardo Lucio, Mar 19 '19 at 03:09
Then I suggest implementing a container for the div and use Javascript to "inject" the div into your DOM before sending the Ajax request. That way you're not executing your Ajax call straight away and instead force Javascript to handle the DOM first — icecub, Mar 19 '19 at 03:13
You could probably use the `beforeSend` callback function for this in your Ajax request even. It's ment to be used to modify the jqXHR before sending the request, but as it's a function, it can be used for anything rly. Just means "do this before sending the request". — icecub, Mar 19 '19 at 03:18
Yes that's the idea. Basicly `beforeSend: someFunction,`. Then create that function. Have it append the div to your DOM. Then make the function return true. It's a callback function. So Ajax waits for it to tell when it's done so it can continue. — icecub, Mar 19 '19 at 03:34
"I'm" simply cast a "downvote" and I do not even say what can be corrected, improved, anyway... Some constructive criticism... =[ — Eduardo Lucio, Mar 19 '19 at 04:49
This is related to "async: false" and in the asynchronous mode, you will not have this problem if you could use it asynchronously. — QMaster, Apr 23 '21 at 00:49

UncleFifi · Answer 1 · 2019-03-20T06:48:54.107

I have written the following for you.

PLEASE LOOK AT THE FOLLOWING EXAMPLE IN MY GITHUB

MyGithubLink

as I have a fully working example that I have tried my best to assist you with. here you will see the use of Jquery CallBack Methods and the promise framework which seems to be what you are having issues with. please comment me back letting me know if this is a final fix as I am determined to help you out.

Click on the JSBin to see my sample => https://jsbin.com/xeloful/edit?html,output

<body onload="myFunction()" style="margin:0;"></body>

is something I want to draw your attention to... please reach out if you still need help... or if this was not helpful...

Or you can run the snippet here on StackOverflow. Below I'm using $(myFunction) instead of onload="myFunction()" which is more conventional for jQuery users. Click "Run Snippet" below to see the results.

function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("myDiv").style.display = "block";
};

function myFunction() {
    //Showing a Div prior to call as promised...
    $("#redSquare").fadeIn(3000).fadeOut(3000, function () {

        //Making the following API Call that will receive a random email from a random user...
        $.ajax({
            url: 'https://randomuser.me/api/',
            dataType: 'json',
            success: showPage
        }).done(function (res, req) {
            //Spitting out information about the HTTP call made...
            console.log(res);
            console.log(req);
            //Storing the email in the following variable...
            var RandomEmail = res.results[0].email;
            //Displaying the email in the console...
            console.log(RandomEmail);
            //Injecting the following email to the DOM
            document.getElementById("randomEmail").innerHTML = RandomEmail;
        });
    });
}

//When the body loads, render this function as seen in the body HTML tag with the onload... This is the jQuery way to do it...
$(myFunction);

#redSquare {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: crimson;
}

/* Center the loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}


@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

#myDiv {
    display: none;
    text-align: center;
}

#randomEmail {
    color: white;
    background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="redSquare">
    <!--Making this Appear for 3 Seconds prior to Ajax...-->
</div>

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">
    <h2>Tada!</h2>
    <p>Some text in my newly loaded page..</p>
    <h1>
        RandomEmail: <span id="randomEmail"></span>
    </h1>
</div>

Linking off-site code is generally only acceptable if a copy is also supplied here on the site. StackOverflow doesn't want dead links. I edited your answer to include the code here. — Mulan, Mar 19 '19 at 04:47
@Felipe Dutra Ferreira The `$("#redSquare").fadeIn(3000).fadeOut(3000, function () {` does not work for me because I need the output in "someArg" (`success: function (someArg) {`). The code continues after `$("#redSquare").fadeIn(3000)...` and we will have "ajaxOp" as "undefined". NOTE: The example has been modified to include the "ajaxOp" variable. Thanks! =] — Eduardo Lucio, Mar 19 '19 at 17:36
@EduardoLucio - I am not sure exactly what you would like to accomplish but I would LOVE to assist you in your quest to get this resolved. Would you please let me know if I am still misunderstanding. You have a AJAX request which will respond with some kind of response(maybe in the form of a JSON payload). Once it is resolved you would like to use it and display it to the DOM. Would this be correct? — UncleFifi, Mar 19 '19 at 23:38
@Felipe Dutra Ferreira In the hope that it helps the understanding I put some more explanations about the question in an update. — Eduardo Lucio, Mar 20 '19 at 01:52
@EduardoLucio please see the github link --> [GitHubLink](https://github.com/MrFiniOrg/AJAX) as I go into much detail of how you will be able to accomplish your task — UncleFifi, Mar 20 '19 at 06:51
@Felipe Dutra Ferreira After `var UserCount;` create the variable `var op;` assign it `op = res;` and run `console.log(op);` at the `function sendForAJAX() {` last line. The displayed value will be `undefined`. There is the problem... =D — Eduardo Lucio, Mar 20 '19 at 15:08
@Felipe Dutra Ferreira I believe that the solution presented by me at https://stackoverflow.com/a/55250121/3223785 is the "possible" solution to my problem. Thank you! — Eduardo Lucio, Mar 24 '19 at 05:30
This is fake loading progress because that is not related to ajax loading time. — QMaster, Apr 23 '21 at 00:46

Eduardo Lucio · Accepted Answer · 2019-03-20T21:01:37.110

A workaround is to use the function below that allows a "loading screen" to be displayed on the system when we make synchronous calls ("ajax"). It can be easily adapted for use with legacy codes.

Realize that "ajax" blocks the modification of the "DOM" even though IT IS EXECUTED BEFORE THIS CALL. This approach will ONLY WORK if it is used at the FIRST TIME of a process that involves some sync ajax call before. Basically, it creates a time window (50 ms) for updating the DOM before executing the desired function/method ("appFunc"). The use of this function only makes sense in situations that require the use of the sync ajax call output immediately after its execution.

EXAMPLE OF USE: <button type="button" onclick="opSyncLoading(login, [this.form])">

In this example we take advantage of the "eventuality" of the user action to create a time window to the thread and display the "loading screen". Note that the "login" function does not return any type of output. Note that everything that happens after "login" function will be done in a "SYNC" way.
This limitation is due to the fact that the JS/DOM has only one "thread" to handle everything, that is, there is no way to wait with a "sleep", for example, since no type of effective parallelism exists. One solution could be to use "web worker", but this is outside the scope of the question presented.
The use of synchronous "ajax" calls MUST be avoided because since it causes side effects to the operation of JS and HTML responsiveness besides being seen as bad practice. Its use should be limited to legacy codes or situations where it is strictly necessary.

TIP: Note that if there is an animated gif on the "loading screen" it will be "locked" until the "ajax" call is completed, however in some modern browsers this problem does not happen. In extreme case there is a possibility that the image will remain "animated" if it is loaded in an iframe (https://stackoverflow.com/a/16704839/3223785).

function opSyncLoading(appFunc, appFuncArgs) {
    if (typeof appFuncArgs === "undefined" || appFuncArgs === "") {
        appFuncArgs = [];
    }
    $("#loadingDiv").fadeIn(500, setTimeout(function () {

        // NOTE: Passing unknown arguments in quantity and nature to a callback function. By Questor
        // [Ref.: https://stackoverflow.com/a/49680525/3223785 ]
        appFunc.apply(this, appFuncArgs);

    }, 50));
}

Thanks! =D

synchronous ajax call - show div before call

2 Answers2