Hourglass while form submits

Question

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>

Solution 1

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.

Solution 2

If you're already using jQuery then I think the BlockUI plugin will be of use to you. You can use it to block out an element or an entire page and overlay a message over the top. The message is HTML markup so it can contain anything that you'd normally be able to include in HTML. A text message, an hour glass graphic, or anything else you can think of. Simply attach the activation of the BlockUI to your form.submit event.

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

Comments

[Oscar Godson]

Thank god... not another jQuery plugin post. Perfect answer.