jquery - 表单提交时的沙漏

Question

我有一个解析 CSV 文件的 grails 应用程序。我让它与表单一起工作，当人们上传表单时，可能需要 30 秒以上才能获得下一页，在此期间，只有精明或额外的 Nerd 观察者会注意到该页面正在“等待响应......”

有没有一种快速的方法可以在不改变表单机制的情况下使用 javascript(也许是 jQuery)放置某种弹出窗口或沙漏或其他东西？我正在寻找一种快速修复方法，无需将整个提交的表单迁移到 JQuery 或其他东西。

在我最初的尝试中，答案似乎是否定的。单击正常表单提交时，浏览器似乎会关闭禁用 javascript 的页面。但是，如果响应是 SAME PAGE，则 javascript 将执行，但这对我没有帮助。

像这样:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">jQuery(function(){
  alert("jquery aint buggeed");  //this happens
  $("#submitHandle4JQ").click(function(){alert("BE PATIENT!!");})  //this does not
}); </script>

...

<form action="/path/mySweetGrailsController/parseStuff" method="post" enctype="multipart/form-data" >
<input type="hidden" name="longNumber" value="935762708000464097" id="longNumber" /> 
<input type="file" name="bigFile" />
<input type="submit" text="Upload My File" name="submitHandle4JQ"/><br/>
</form>

Answer 1

试试这个。当您的表单正在处理时，将一个名为“waiting”的类添加到正文中，然后:

<style type="text/css">
.waiting { cursor: wait; }
</style>

浏览器对光标属性的支持并不完美，但它的大部分缺陷都与为光标使用自定义图像有关，而不是与基于操作系统映射到默认图标的默认关键字(如“等待”)有关您正在使用(XP 及更低版本中的沙漏，Windows 7 中的旋转圆圈，旧 Mac OS 中的旋转沙滩球等)。见:

http://reference.sitepoint.com/css/cursor

您必须进行试验，看看这是否适用于满足您需求的足够多的浏览器。

编辑:哦，当你完成让等待光标消失时，再次将 .waiting 类从主体中取出。