Javascript方法中的Jquery对话框打开延迟 [英] Jquery dialog open delay in Javascript method

问题描述

我在纯HTML页面中有一个保存按钮，我在其中调用一个使用XMLHttpRequest来保存数据的JS函数。我正在尝试实现一个JQuery模式弹出窗口，它会在单击保存按钮时显示加载图像。但对话框打开需要将近2秒钟，任何人都可以告诉我原因。


这是HTML部分

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

<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>

这是JS部分

Here is the JS part

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";
    }

}

推荐答案

（' ＃dialog1'）。dialog（' 打开'）;

('#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").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（）;

('#dialog1').dialog('close'); ScrollToTop();

这篇关于Javascript方法中的Jquery对话框打开延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！