5

Apologies if this is simplistic; I am new to JQuery. I have searched and found questions like this, but they don't seem to quite answer my question.

I am using JQuery to show a dumb progress indicator for actions that take a long time:

$(document).ready(function() {
    $('form').submit(function() {
        $('#progress').show();
    });
});

When the user clicks a form button, I just show a div with an animated gif. This div is visible for the rest of the time the page is visible. After the form's action is complete, a new page loads.

This works well, but what if the user clicks "stop" in the browser before the action completes? How can I make the div disappear? Is there a way to catch this event, or is there a better way to handle the whole situation?

Thanks for your help.

Community
  • 1
  • 1
  • It is unlikely you can capture that event. But the better way would be to submit your form data using AJAX. Perhaps [check this out](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) – musefan Apr 23 '13 at 14:59
  • There is an "onstop" event, it's not cross-browser and not very reliable. – Xotic750 Apr 23 '13 at 15:03
  • Can you just select the div and remove it? Something like: `$('#progress').remove()` will take it out of the DOM. It won't stop whatever actions are happening. Doing so would require other actions based on how you're running the action. – ckersch Apr 23 '13 at 15:06
  • @musefan, it's not submitting the form data that takes a long time, it is a long-running process that runs as a result. I know I could use AJAX to give any kind of feedback in the browser. But I'm trying to avoid that complexity (which for me would include learning AJAX...). –  Apr 23 '13 at 15:53
  • @ckersch, I know how to make the div disappear--the question is how do I *trigger that disappearance*? How do I know when the stop button was pressed and respond to it? –  Apr 23 '13 at 15:54
  • The only way to truly detect this would be to use an ajax submit. There is no way to detect when the user clicks the "stop" button via Javascript/jQuery. – RestingRobot Apr 23 '13 at 16:06
  • @dan1111 AJAX is not very hard to "learn" it is simply a method of Asynchronous Javascript. See here, (http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form), for an example of submitting via AJAX. – RestingRobot Apr 23 '13 at 16:08
  • 1
    @dan1111 I would say, learning how ajax works is definitely worth your time, and since you are already using jQuery you will be taking advantage of a big chunk of the jQuery API... – excentris Apr 23 '13 at 17:47
  • Echoing @netrunner's comment. It's worth learning and jQuery takes care of the most difficult parts for you. – Steve Hansell Apr 25 '13 at 14:01

1 Answers1

0

You can use "onstop" event to handle this, but it will only work for IE. I think you cannot handle such event for other browsers.

What you can try is to make the progress dialog disappear after small timeout:

$('form').submit(function() {
    $('#progress').show();
    setTimeout(function(){
             $('#progress').hide();  
    },3000);
});
paulitto
  • 4,202
  • 1
  • 18
  • 26
  • Yes, I have concluded that it is not possible. However, making it disappear after a timeout really doesn't help. It makes it even more confusing: the dialog box will disappear before the task is done (making the user think it failed); or it will take awhile to disappear when they click stop (making the user think it is still going); or both. –  Apr 25 '13 at 13:37