表单提交时的沙漏

发布于 2024-11-09 10:57:06 字数 1051 浏览 0 评论 0原文

我有一个 grails 应用程序可以解析 CSV 文件。我让它与表单一起工作，当人们上传表单时，可能需要 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>

原文

I have a grails application which parses a CSV file. I have it working with a form, and when people upload the form it can take 30 seconds plus to get the next page during which time only an astute or extra nerdy observer will notice the page is "waiting for response from.."

Is there a quick way to put some kind of pop-up or hourglass or something with javascript (maybe jQuery) while not changing the mechanics of the form? I am looking for a quick fix WITHOUT migrating the entire submission of the form to JQuery or something.

In my initial attempts the answer seems to be no. When the normal form submit is clicked the browser seems to chuck the page disabling the javascript. However, if the response is the SAME PAGE the javascript will execute then, but that doesn't help me.

Something like this:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

因为看清所以看轻 2024-11-16 10:57:06

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

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

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

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

您必须进行实验看看这是否可以在足够多的浏览器中运行以满足您的需求。

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

Try this. When your form is being processed, add a class called "waiting" to the body, and then:

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

Browser support for the cursor property is not perfect, but most of its deficiencies have to do with using custom images for your cursor, rather than with the default keywords (like "wait") that map to default icons based on what OS you're using (hourglass in XP and lower, spinning circle in Windows 7, spinning beach ball in old Mac OS, etc). See:

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

You'll have to experiment to see if this works in enough browsers to fit your needs.

EDIT: Oh, and take the .waiting class off the body again when you're done to make the waiting cursor go away.

回复收藏 0 原文

羁客 2024-11-16 10:57:06

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

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

回复收藏 0 原文