彈出的jQuery之前處理完

Question

我是新來的jQuery，我需要弄清楚如何做到以下幾點：

我有我的頁面上的提交按鈕，點擊時執行一個jQuery功能。該函數將從mysql加載一些信息並用該信息回顯表。

我的問題是，這需要時間，同時用戶正在等待甚至重新提交。

我想要的是在我開始從mysql獲取數據並在數據回傳到頁面之後移除之前顯示的彈出屏幕。

我在找什麼？這個叫什麼？我怎麼能實現這樣的想法。

這是我的代碼：

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#form-lecturer-login').submit(function(event){ 
event.preventDefault(); 
//I need: Display a pop up 

//This is working : Code to fetch mysql data and echo a table 

//I need: Remove popup 
} 

這裏是我的全碼： pastebin.com/JVCfWbLD

Answer 1

使用

.blockUI() in jQuery . 

我認爲這將解決您的問題。

block ui

它會阻止，直到你解鎖it.It屏幕是非常好的插件。

Answer 2

最好的辦法是當用戶提交使用加載條。 這裏是一個演示

http://bokehman.com/loading

Answer 3

因爲實際上使用jQuery submit而不是AJAX，頁面正在等待你的服務器端的處理程序來處理數據。試試這個：

把這兩個線在你的頁面的<header>：

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"> 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> 

然後修改如下代碼：

<script type="text/javascript"> 

     $(document).ready(function(){ 

      $(function() { 
       $("#dialog-modal").dialog({ 
        height: 140, 
        modal: true, 
        autoOpen: false 
      }); 

      $('#form-lecturer-login').submit(function(event) { 
       event.preventDefault(); 

       $("#dialog-modal").dialog("open"); 

        //Your working processing code here. 

       $("#dialog-modal").dialog("close"); 
      } 

     }); 

然後在你的HTML的身體：

<div id="#dialog-modal" title="Stand by..."> 
    <p>Your data is loading, please stand by...</p> 
</div>