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

它会阻止屏幕，直到你取消阻止它。这是非常好的插件。

Answer 2

由于您实际上使用的是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>

Answer 3

最好的方法是在用户提交时使用加载栏。这是一个演示

http://bokehman.com/loading

弹出，直到jquery完成处理

3 个答案: