Click here to Skip to main content
15,893,508 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
I have a save button in my pure HTML page where i call a JS function which uses XMLHttpRequest to save data. I am trying to implement a JQuery modal popup , which will show a loading image when the save button is clicked. But it takes nearly 2 seconds for dialog to open , can anyone please tell me why.

Here is the HTML part
HTML
<div id="dialog1" title="Waiting" style="text-align:center;background-color:#ffffff;border:none;display:none;">
       <img src="~/Images/icon-load.gif" border="0" align="left" hspace="12" height="175" width="175" />
   </div>


Here is the JS part

JavaScript
function addnewentity() {


    var aa= document.getElementById('aaa').value;
    var bb= document.getElementById('bbb').value;
    var cc= document.getElementById('ccc').value;
    var validation = document.getElementById("valmsgentity");

    if (aa!= "" && bb!= "" && cc!= "") {

        validation.style.display = "none";
        $('#dialog1').dialog('open');
        $("#dialog1").prev(".ui-dialog-titlebar").hide();

        var source = {
            "A": aa, "B":bb , "C": cc
        }

        var jsonsource = JSON.stringify(source);
        var method = "POST";
        var request = new XMLHttpRequest();
        request.onload = function () {
            var status = request.status;
            var data = request.responseText;
        }
        request.open(method, createurl, false);
        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        request.send(jsonsource);

        setTimeout(function () {
            $('#dialog1').dialog('close');

            ScrollToTop();

            $("#message").show();

            //200 OK ; 201 Created ; 202 Accepted
            if (request.status == 200 || request.status == 201 || request.status == 202) {

                $("#message").text('Added successfully!!!');
                $("#message").css("color", "green");
                setTimeout(function () { fadeLabelOut(); }, 5000);
                setTimeout(function () { location.reload(); }, 7000);
            }
            else {

                $("#message").text("Failed to add !!!");
                $("#message").css("color", "red");
                setTimeout(function () { fadeLabelOut(); }, 5000);
                console.log(request.responseText);
            }
        }, 2500);
    }
    else {
        validation.style.display = "block";
    }

}
Posted

1 solution

Since JavaScript is single threaded when you call .dialog() you won't actually see it until that thread finishes. So, what you want to do for a case like this is call .dialog() and then move the rest of your code into a second function and call that function using setTimeout(function, delay) so that the thread .dialog() is in can finish at which point the browser will display it in the UI.
 
Share this answer
 
Comments
Arjun Menon U.K 15-Dec-15 9:19am    
Hi Ryan,
Atually i was able to find a solution by making the request aysn and writing the dependent code on the readystatechanged of the xmlhttprequest object. But coming to ur suggestion, the timeout delay what shall i give? I mean we will never know when the dialog thread has done executing
ZurdoDev 15-Dec-15 9:22am    
You did the same thing I suggested, just a different method.

The delay could be set to 1. It will get queued to run in 1 millisecond so if the current thread is not finished in 1 millisecond then it stays in the queue and will execute as soon as the current thread is done.

But your method works too.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900