3

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

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

在我最初的尝试中，答案似乎是否定的。单击正常表单提交时，浏览器似乎会丢弃禁用 javascript 的页面。但是，如果响应是相同的页面，那么 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>
4

3 回答 3

8

尝试这个。处理表单时，在正文中添加一个名为“waiting”的类，然后：

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

浏览器对光标属性的支持并不完美，但它的大部分不足之处在于为光标使用自定义图像，而不是使用根据您的操作系统映射到默认图标的默认关键字（如“等待”）使用（XP 及更低版本中的沙漏，Windows 7 中的旋转圆圈，旧 Mac OS 中的旋转沙滩球等）。看：

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

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

编辑：哦，当你完成使等待光标消失时，再次将 .waiting 类从正文中移除。

于 2011-05-23T21:54:21.870 回答
2

如果您已经在使用 jQuery，那么我认为 BlockUI 插件将对您有用。您可以使用它来屏蔽一个元素或整个页面，并在顶部覆盖一条消息。该消息是 HTML 标记，因此它可以包含您通常能够包含在 HTML 中的任何内容。一条短信，一个沙漏图形，或者任何你能想到的东西。只需将 BlockUI 的激活附加到您的 form.submit 事件。

http://jquery.malsup.com/block/

于 2011-05-23T21:47:46.460 回答
0

我知道这很旧，但我找不到关于堆栈溢出的最新答案 - 不得不求助于Code Ranch

进程开始时的 javascript

document.body.style.cursor = 'wait';

进程结束时的 javascript

document.body.style.cursor = 'default';
于 2020-07-18T15:50:20.053 回答