javascript - 模态框在 Ajax 调用完成后弹出，而不是之前或期间弹出-6ren

javascript - 模态框在 Ajax 调用完成后弹出，而不是之前或期间弹出

转载作者：行者123 更新时间：2023-12-02 23:46:40

我正在尝试在进行 Ajax 调用时显示模式弹出窗口以显示“请稍候”。仅在调用完成后才会弹出。

当我单击我的网络链接时，一切正常，除了在要求用户等待的延迟之后，应该显示“请稍候”的模式弹出窗口会闪烁一瞬间。也就是说，模式是在 Ajax 调用完成之后而不是之前弹出的。

当页面加载时，它会调用AjaxInitialUpdate。这工作得很好。

问题是当您单击调用 AjaxChangePassword 的按钮时。

该函数应该拉出一个模态，然后联系 Web 服务器，最后删除该模型并调用 AjaxInitialUpdate 函数刷新整个屏幕。

问题在于，AjaxChangePassword 模式在 Web 查询完成之前不会弹出(此时，告诉用户“请稍候”是没有意义的)。

现在，我完全是自学成才，所以我可能会用错误的名称或术语来称呼事物。我欢迎任何让它运行得更好的想法，但请详细说明，我在 Java 方面还是新手。

另外，我上次进行任何类型的 HTML 编程是在样式表成为可行之前，所以我也必须学习它们(并刷新所有其余内容，所以请解释任何答案详细)。

最后，它的服务器端是用 Powershell 编写的，并且是单线程的，因此我尝试将尽可能多的内容放入 HTML 文件中，而不是调用辅助文件，例如样式表和图像。

<!DOCTYPE html>    
<head>    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />    
<meta http-equiv="Pragma" content="no-cache" />    
<meta http-equiv="Expires" content="0" />    
<meta name="viewport" content="width=device-width, initial-scale=1">    
<style>    

body {font-family: Arial, Helvetica, sans-serif;}    


/* The Modal (background) */    
.modal {    
  display: none; /* Hidden by default */    
  position: fixed; /* Stay in place */    
  z-index: 1; /* Sit on top */    
  padding-top: 100px; /* Location of the box */    
  left: 0;    
  top: 0;    
  width: 100%; /* Full width */    
  height: 100%; /* Full height */    
  overflow: auto; /* Enable scroll if needed */    
  background-color: rgb(0,0,0); /* Fallback color */    
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */    

  /* Believe these are not needed.
     Imported from web site that I copied the code from.
  padding: 8px 8px;    
  outline: none;    
  border: none;    
  border-radius: 115px;        
  box-shadow: 0 3px #999; */    
}    


/* Modal Content */    
.modal-content {    
  background-color: #fefefe;    
  margin: auto;    
  padding: 20px;    
  border: 1px solid #888;    
  width: 70%;    
}    

/* The Close Button */    
.close {    
  color: #aaaaaa;    
  float: right;    
  font-size: 28px;    
  font-weight: bold;    
}    

.close:hover,    
.close:focus {    
  color: #000;    
  text-decoration: none;    
  cursor: pointer;    
}    


#IndividualSystem {    
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    
  border-collapse: collapse;    
  width: 100%;    
  border: 1;    

}    

#IndividualSystem td, #IndividualSystem th {    

  text-align: left;    
  padding: 8px;    
  color: black    
  border: 1px solid black;    
}    


#IndividualSystem tr {    
  padding-top: 12px;    
  padding-bottom: 12px;    
  text-align: left;    
  background-color: #eeeeee;    
}    

.tab { margin-left: 40px; }    

.button {    
  display: inline-block;    
  padding: 8px 8px;    
  font-size: 12px;    
  cursor: pointer;    
  text-align: center;    
  text-decoration: none;    
  outline: none;    
  color: #fff;    
  background-color: #4CAF50;    
  border: none;    
  border-radius: 15px;        
  box-shadow: 0 3px #999;     
}    

.button:hover {background-color: #3e8e41}    

.button:active {    
  background-color: #3e8e41;    
  box-shadow: 1 5px #666;       
  transform: translateY(4px);    
}    

.button2 {    
  display: inline-block;    
  padding: 8px 8px;    
  font-size: 12px;    
  cursor: pointer;    
  text-align: center;    
  text-decoration: none;    
  outline: none;    
  color: #fff;    
  background-color: #000080;    
  border: none;    
  border-radius: 15px;        
  box-shadow: 0 3px #999;     
}    

.button2:hover {background-color: #df330e}    

.button2:active {    
  background-color: #FD2E02;    
  box-shadow: 1 5px #666;       
  transform: translateY(4px);    
}    

#IndividualSystem {    
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    
  border-collapse: collapse;    
  width: 100%;    
  border: 1;    

}    

</style>    

<Title>Cyber Track</title>    
</head>    

<body>    
<table>    
    <tr>    
        <td>blah</td>    
        <td><h1>Systems and Passwords</H1>    
        <h3>Information within this page is considered confidential.</h3>    
    </td></tr>    
</table>    

<hr>    


<input type="hidden" id="Leftlink" name="Leftlink" value="0">    
<input type="hidden" id="Rightlink" name="Rightlink" value="0">    
<input type="hidden" id="serverID" name="serverID" value="server8\admin-server8">    
<input type="hidden" id="count" name="count" value="10">     <!---  Number of servers per page on server list //-->    

<!-- The Modals #1 -->    

<div id="myModal1" class="modal">    

    <!-- Modal content -->    
        <div class="modal-content">    
            <h4><label id="ModalTextLine1">Loading content from server</label></h4>    
        </div>    
</div>    

<!-- The Modals #2 -->    
<div id="myModal2" class="modal">    
    <!-- Modal content -->    
        <div class="modal-content">    
            <span class="close2">&times;</span>    
            How long do you need the password?    

                <form action='#'>    
                <select name="days">    
                <option value='1' >1 day or less</option>     
                <option value='7'>between 1 and 2 days</option>     
                <option value='7'>between 2 and 7 days</option>     
                <option value='30'>between 7 and 30 days</option>     
                <option value='365' selected>for up to a year.</option>     
                </select>    
                <br>    
                <input type="submit" value="Process Request">    
            </form>    
        </div>    
</div>    

<script>    
// Get the modal    
var modal2 = document.getElementById('myModal2');    

// Get the <span> element that closes the modal    
var span = document.getElementsByClassName("close2")[0];    

// When the user clicks on <span> (x), close the modal    
span.onclick = function() {    
  modal2.style.display = "none";    
}    

// When the user clicks anywhere outside of the modal, close it (or actually, just hide it)    
window.onclick = function(event) {    
  if (modal2.style.display != "none")    
  {    
    if (event.target == modal2) {    
        modal2.style.display = "none";    
    }    
  }    
}    
</script>    

<!-- End Loaded from function -->    

<table id="IndividualSystem">  <!-- IndividualSystem - to define needed style sheet //-->    
<tr>    
    <td style="width: 215px;">Server</td>    
    <td style="width: 259px;"><label ID="DynServerName">Loading</label></td>    
</tr>    
<tr>    
    <td style="width: 215px;">User ID</td>    
    <td style="width: 259px;"><label ID="DynAdminID">Loading</label></td>     
</tr>    
<tr>    
    <td colspan="2"><hr></td>    
</tr>    
<tr>    
    <td style="width: 215px;">Checked out status:</td>    
    <td style="width: 259px;"><label ID="DynLastCheckedout">Loading</label></td>    
</tr>    
<tr>     
    <td style="width: 215px;" valign='top' >Last checked out by:</td>    
    <td style="width: 259px;" valign='top' ><label ID="DynLastCheckedBy">Loading...</label>&nbsp;&nbsp;&nbsp;    
                 <button class="button" onclick="javascript:AjaxCheckOutPassword()" id="PassStatus">Loading</button> <!--  AjaxCheckOutPassword -->    
    </td>    
</tr>    
<tr>    
    <td valign='top' style="width: 215px;">Expected Check In Date:</td>    
    <td valign='top' style="width: 259px;"><label ID="DynExpectedBack">Loading</label></td>    
</tr>    
<tr>    
    <td style="width: 215px;">Date of last password change:</td>    
    <td style="width: 259px;"><label id="DynLastReset">Loading</label>&nbsp;&nbsp;&nbsp;<button class="button2" onclick="AjaxChangePassword()">Force Change Now!</button>    
                  </td>    
</tr>    
<tr>    
    <th colspan="2">Notify:<br>    
        <table border="1" padding = "0" width=100%>    
            <tr>    
                <td width=200>On Use:</td><td><label id="DynEmailCheckOut">Loading</label></td>    
            </tr>    
            <tr>    
                <td width=200>On Checkin:</td><td><label id="DynEmailCheckIn">Loading</label></td>    
            </tr>    
        </table>    
    </th>    
</tr>    
<tr><td colspan="2">    
        <label ID="DynAccountPurpose"></label>    
</td></tr>    

</tbody>    
</table>    

<!-- Page Footer (if any) //-->    

<!-- Page links left/up/right //-->    
<table>    
<tr><td width = 50>    
    <label id="Show-Left">    
        <a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(-1)" text='Prior Server'>    
                     <img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgABoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9+Wwp/wDrVzHxS+Kmk/B3wfda3rdz9lsbPZ5kvlvJ951QfKis3V1HA7074ofE/SPhD4RvNc1m5+x6fZ7PNl8t5Nu50ReFBJyzgcDv6Dj853k8Zf8ABW/4sgY/sv4d6T0X9zPjzIfX9xNzPae/X+6Ob9naPtJ7GXM5Plgfod8H/jHoXxw8FW3iDw7c/btPvt4WTy5I87JHj6SKp+8jfwj8etddvHp+hrm/hb8L9H+EnhO30PQ7f7JZWe7am93xvdnPLsx6sT1P8q6QcDjbjt8prGPdm0rHjv7Yf7JOj/tW/DuTS9Q/0e6jx5M+Hfyv3sTt8qyIDkRAc9O1fH/7GP7T+t/sN+P4/hD8TB5OnQ5+yXX7t/s+Y5rt/kt45C2WmiHMnGeOMgfpEWJb73H0614v+2N+x1oP7WfgiTT9SBt7+HBtrr94/lZkhZvkWRAciEDn8OldCqc0fZzMJU+WXNA9hsb9NQtVlhfdG2drYIzg4PWp8r/drzb9lv4I3fwH+EWn+HNQ1X+2JrPzM3H2YW+7dNLJ90MwGBIB949Pwr0kx8/d/SsIO2jOjRn/2Q==' alt='go to prior server' height='26' width='32'>    
        </a>    
    </label>    
    &nbsp;    
   </td>    
   <td>    
            <a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(0)" text='Next server'>Return to main list</a>    
   </td>    
   <td width = "50">    
   <label id="Show-Right">    
        <a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(1)" text='Next server'>    
                    <img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgABoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD97dc1U6Zp000cfnPHt+Tdt3ZIHX8a+Z/2Sv8AgpDpfx98c3/hjWNP/wCEf16Dy/Kt/Pe78zMcsp+ZYVQYSMHk/wAXqK+oihPT8DXx7/wUM/4J8r8Wo4/GXg5fsfi7T85XPmfat/2eH/lrMsabYkf+E5z64NEHGM+WezFUTcbw3PsMgtjj6nNO8pfSvjn/AIJv/wDBRD/hoLTj4b8UDyPFFr99s7vtG43Eg4jhWNdsca9+frmvsPa3/PX/AMdrSdKUHZkQqxmtCPULyK1tXef5YVxuPJ7+3PWvzt/a4/a28S/tm/Ek/Cz4V/vrOX/j7u/3S+ZiKK6T5LmOMjBhlHD+57A/ofqenQ6hbPFP80BxuXkdwRyOetef/Aj9lXwh+zpHer4a077AL7y/NP2iaXds34/1kj4/1jdPWsYqLneey/E0nJqP7vcwv2Ov2OdD/ZM+H/8AZunjzr64/wCPy7zIv2jbJMyfI0jhdolI4PPU+3su5fX9KAdwyRgntmn7hWs6spvmkZwpRjsf/9k=' alt='go to prior server' height='26' width='32'>    
        </a>    
   </label>    
   &nbsp;    
  </td>    
</tr></table>    

<!-- End Page links left/up/right //-->    

<!-- Dynamic JAVA Script Section //-->    

<script>    

// disable our NAV pointers till later where we may re-enable them.    
document.getElementById('Show-Right').style.display = 'none';    
document.getElementById('Show-Left').style.display = 'none';    

//
//  This is the specific function that I need help with.
//  Why does this modal pop up only after the actual query is done?
//    
function AjaxChangePassword(){    

    document.getElementById('myModal1').style.display = "block";    
    document.getElementById('myModal2').style.display = "none";   // Make sure its not poped up..    
    // we need to set item on the modal to explain what we are doing...    
    document.getElementById("ModalTextLine1").innerHTML="Processing password change request.  Please Wait"   

    var xhr = "";    
    var xhr = new XMLHttpRequest();    

    // server will check if values are valid..    
    var Server = document.getElementById("DynServerName").innerHTML;    
    var AdminID = document.getElementById("DynAdminID").innerHTML;    

    xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=change&server=' + Server + '/' + AdminID+'&NoCache=' + ((new Date()).getTime()), true);    

    xhr.responseType = 'text';    

    xhr.onload = function () {    
        console.log('Initail Comment Response onpassword change.');    
        if (xhr.readyState === xhr.DONE) {    
            if (xhr.status === 200) {    
                console.log(xhr.response);    
                console.log("Report password changed.");    
                AjaxInitialUpdate() // password changed, lets refresh.    
            };    
        };    

    };    
    xhr.send(null);    
    document.getElementById('myModal1').style.display = "none";    
};    


// Navigate left and right..    
function AjaxNavigate(link)    
{    

    xx = document.getElementById('Leftlink').value    

    xx = document.getElementById('Rightlink').value    

    if (link == 0)    
    {    
        // Back to the main page.  Get the values that make who we are -- servername and count.    
        var count = document.getElementById('count').value;    
        var CurrentSystem = document.getElementById('serverID').value;    
        var x = '/CyberPass3/?command=homepage&server=' + CurrentSystem + '&count='+ count + '&NoCache=' + ((new Date()).getTime());    

        location.replace('/CyberPass3/?command=homepage&server=' + CurrentSystem + '&count='+ count + '&NoCache=' + ((new Date()).getTime()));    
    }    
    else    
    {    
        if (link == 1)    
        {    
            document.getElementById('serverID').value  = document.getElementById('Rightlink').value    
        } else {            
            document.getElementById('serverID').value = document.getElementById('Leftlink').value    
        }    

        // we've moved left or right.  Lets update.    
        AjaxInitialUpdate()    
    }    

}    

function AjaxCheckOutPassword() {    

                console.log("Checkout Code not yet written");    
};    


function AjaxInitialUpdate() {    
    var xhr = ""    
    var xhr = new XMLHttpRequest();    
    var count = document.getElementById('count').value;    
    var link = document.getElementById('serverID').value    
    document.getElementById('myModal1').style.display = "block";   // show we are updating everything..    
    document.getElementById('myModal2').style.display = "none";   // should already be hidden, but lets make sure..    
    xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=refresh&server=' + link + '&count=' + count + '&NoCache=' + ((new Date()).getTime()), true);    
    xhr.responseType = 'text';    

    xhr.onload = function () {    
        console.log('Initail Response.');    
        if (xhr.readyState === xhr.DONE) {    
            if (xhr.status === 200) {    

                WebFields = xhr.responseText.split("|");    

                document.getElementById("DynServerName").innerHTML = WebFields[0];    
                document.getElementById("DynAdminID").innerHTML = WebFields[1];    
                document.getElementById("DynLastCheckedout").innerHTML = WebFields[2];    
                document.getElementById("DynLastCheckedBy").innerHTML = WebFields[3];    
                document.getElementById("DynExpectedBack").innerHTML = WebFields[4];    
                document.getElementById("DynLastReset").innerHTML = WebFields[5];    
                document.getElementById("PassStatus").innerHTML = WebFields[6];    
                document.getElementById("DynEmailCheckIn").innerHTML = WebFields[7];    
                document.getElementById("DynEmailCheckOut").innerHTML = WebFields[8];    
                // if no comment, don't even dispay the table cells.    
                if (WebFields[9].slice(0,1) == "{" && WebFields[9].slice(-1) == "}" && WebFields[9] != "{}" )    
                {    
                   var res = WebFields[9].split("{");    
                   var res = res[1].split("}")[0];    
                   document.getElementById("DynAccountPurpose").innerHTML = "<tr><td style='width: 474px;' colspan='2'><p><b>Account Comments:</b></p><p class='tab'>" + res + "</p></td></tr>";    
                   }    
                else    
                {    
                    document.getElementById("DynAccountPurpose").innerHTML = "";    
                    console.log("No Comment");    
                };    

                // lets populate the nav buttons..    
                if (WebFields[10] == '\\')    
                {    
                    // hide go left    
                    document.getElementById('Show-Left').style.display = 'none';    
                    document.getElementById("Leftlink").value = "0/0"    
                }    
                else    
                {    
                    //Enable go left    
                    document.getElementById('Show-Left').style.display = 'block';    
                    document.getElementById('Leftlink').value  = WebFields[10];    

                };    


                // lets populate the nav buttons..    
                if (WebFields[11] == "\\")    
                {    
                    // hide go right    
                    document.getElementById('Show-Right').style.display = 'none';    
                    document.getElementById("Rightlink").value = "0/0";    
                }    
                else    
                {    
                    // Enable go right    
                    document.getElementById('Show-Right').style.display = 'block';    
                    document.getElementById("Rightlink").value  = WebFields[11];    
                };    
                document.getElementById('myModal1').style.display = "none";    
            }    
            if (xhr.status === 403) {    
                console.log(xhr.response);    
                document.getElementById("PassStatus").innerHTML = 'Access Denied';    
            }    
            if (xhr.status === 404) {    
                console.log(xhr.response);    
                document.getElementById("PassStatus").innerHTML = 'Unable to load';    
            };    
        }    
        else    
        {    
            document.getElementById("PassStatus").innerHTML = "Failed";    
        };    
};    

xhr.send(null);    

};    

// Now, load the initial value..    
window.onload = AjaxInitialUpdate();    

</script>

当我调用AjaxChangePassword()时，我希望模式在查询之前打开。就像现在一样，如果我在页面加载后但在启动此功能之前停止服务器，则模式永远不会弹出，然后一旦我启动服务器端备份，我就会看到查询进入并获得答案，仅然后它会弹出，然后只弹出一瞬间。

我调用它的方式做错了什么？

最佳答案

当我审查你的代码时，发现在函数 AjaxChangePassword 首先打开模态，然后调用 ajax，然后关闭模态，问题是基本上 javascript 是同步执行的，但如果有 ajax 调用，那么它会异步执行，所以根据你的模态打开，然后调用 ajax 直到 ajax 忙于获取响应，然后才会执行下一行，该行用于模态关闭，这发生在几毫秒内，因此您看不到任何内容，并且您说在 ajax 调用模态之后之所以显示，是因为在 AjaxChangePassword 中，回调方法是 AjaxInitialUpdate，并且在这个方法中，您打开了模态，然后关闭了，但请记住，在此方法中，您在回调方法中关闭了模态，因此它会出现一段时间，您可以看到，根据我的说法，只需删除

document.getElementById('myModal1').style.display = "none";

下面 AjaxChangePassword 方法中的这一行是更正的 AjaxChangePassword 函数

    function AjaxChangePassword(){    

    document.getElementById('myModal1').style.display = "block";    
    document.getElementById('myModal2').style.display = "none";   // Make sure its not poped up..    
    // we need to set item on the modal to explain what we are doing...    
    document.getElementById("ModalTextLine1").innerHTML="Processing password change request.  Please Wait"   

    var xhr = "";    
    var xhr = new XMLHttpRequest();    

    // server will check if values are valid..    
    var Server = document.getElementById("DynServerName").innerHTML;    
    var AdminID = document.getElementById("DynAdminID").innerHTML;    

    xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=change&server=' + Server + '/' + AdminID+'&NoCache=' + ((new Date()).getTime()), true);    

    xhr.responseType = 'text';    

    xhr.onload = function () {    
        console.log('Initail Comment Response onpassword change.');    
        if (xhr.readyState === xhr.DONE) {    
            if (xhr.status === 200) {    
               document.getElementById('myModal1').style.display = "none";  
                console.log(xhr.response);    
                console.log("Report password changed.");    
                AjaxInitialUpdate() // password changed, lets refresh.    
            };    
        };    

    };    
    xhr.send(null);  
};

并检查。我可能是错的，但请检查一下。

关于javascript - 模态框在 Ajax 调用完成后弹出，而不是之前或期间弹出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55830200/

文章推荐： javascript - React : Loading scripts in takes long time, 无法使用

文章推荐： javascript - 如何从表中删除不等于某个值的行？

文章推荐： javascript - 我无法用纯 JavaScript 获得元素的准确高度

文章推荐： javascript - 如何放大图像的中心？

dart - 对于 "pubsub.stream.listen(print, onDone: (){print(' 完成')})。 ", the "完成 :"never work
从 Redis 获取消息时，onDone:(){print('done')} 从未起作用。 import 'package:dartis/dartis.dart' as redis show PubS
Vim状态栏的预测/完成？
昨天我玩了一些vim脚本，并设法通过循环来对当前输入的内容进行状态栏预测(请参见屏幕截图(灰色+黄色栏))。问题是，我不记得我是怎么得到的，也找不到我用于该vim魔术的代码片段(我记得它很简单):它
Bash 完成
我尝试加载 bash_completion在我的 bash (3.2.25) 中，它不起作用。没有消息等。我在我的 .bashrc 中使用了以下内容 if [ -f ~/.bash_completio
具有等号和可枚举标志值的 Bash 完成
我正在尝试构建一个 bash 完成例程，它将建议命令行标志和合适的标志值。例如在下面 fstcompose 命令我想比赛套路先建议 compose_filter= 标志，然后建议来自 [alt_seq
重定向符号后的 Bash 完成
当我尝试在重定向符号后完成路径时，bash 完成的行为就好像它仍在尝试在重定向之前完成命令的参数一样。例如: dpkg -l > /med标签通过在 /med 之后点击 Tab我希望它完成通往 /
iphone - CAKeyframeAnimation 完成
我的类中有几个 CAKeyframeAnimation 对象。他们都以 self 为代表。在我的animationDidStop函数中，我如何知道调用来自哪里？是否有任何变量可以传递给 CAKe
cocoa - NSDateFormatter 完成
我有一个带有 NSDateFormatter 的 NSTextField。格式化程序接受“mm/dd/yy”。可以自动补全日期吗？因此，用户可以输入“mm”，格式化程序将完成当前月份和年份。最佳答
cocoa - NSTextfield 完成
有一个解决方案可以使用以下方法完成 NSTextField : - (NSArray *)control:(NSControl *)control textView:(NSTextView *)tex
javascript - 完成()与返回完成()
我正在阅读 Passport 的文档，我注意到 serialize()和 deserialize() done()被调用而不被返回。但是，当使用 passport.use() 设置新策略时在回调函数
javascript 加载图像!完成
在 ubuntu 11.10 上的 Firefox 8.0 中，尽管 img.complete 为 false，但仍会调用 onload 函数 draw。我设法用 setTimeout hack 解决
c++ - 等待第一个将来用C++完成
假设我有两个与两个并行执行的计算相对应的 future 。我如何等到第一个 future 准备好？理想情况下，我正在寻找类似于Python asyncio's wait且参数为return_when=
Java 数据结构表明队列已结束/完成？
我正在寻找一种 Java 7 数据结构，其行为类似于 java.util.Queue，并且还具有“最终项目已被删除”的概念。例如，应可以表达如下概念: while(!endingQueue.isFi
jquery - 完成 If 语句
这是一个简单的问题。 if ($('.dataTablePageList')) { 我想做的是执行一个 if 语句，该语句表示如果具有 dataTablesPageList 类的对象也具有 menu
jQuery 在执行之前等待replaceWith 完成
我用replaceWith批量替换了许多div中的html。替换后，我使用 jTruncate 来截断文本。然而它不起作用，因为在执行时，replaceWith 还没有完成。我尝试了回调技巧 ( H
JavaScript 表单提交()完成
有没有办法调用 javascript 表单 submit() 函数或 JQuery $.submit() 函数并确保它完成提交过程？具体来说，在一个表单中，我试图在一个 IFrame 中提交一个表单。
javascript - 推迟行动直到 .each() 完成
我有以下方法: function animatePortfolio(fadeElement) { fadeElement.children('article').each(function(i
android - registerEntityModifier 完成
我刚刚开始使用 AndEngine，我正在像这样移动 Sprite : if(pValueY < 0 && !jumping) { jumping =
android - 完成 "all"异步任务后更新屏幕
我正在使用 asynctask 来执行冗长的操作，例如数据库读取。我想开始一个新 Activity 并在所有异步任务完成后呈现其内容。实现这一目标的最佳方法是什么？我知道 onPostExecute
从另一个完成 Bash 完成
我有一个脚本需要命令名称和该命令的参数作为参数。所以我想编写一个完成函数来完成命令的名称并完成该命令的参数。所以我可以这样完成命令的名称 if [[ "$COMP_CWORD" == 1 ]];
android - 完成()不工作
我的应用程序有一个相当奇怪的行为。我在 BOOT_COMPLETE 之后启动我的应用程序，因此在我启动设备后它是可见的。 GUI 响应迅速，一切正常，直到我调用 finish()，按下按钮时，什么都没

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 模态框在 Ajax 调用完成后弹出，而不是之前或期间弹出