Display jQuery dialog onSubmit while HTML form is processing

Question

I have an HTML form that allows a user to add an attachment up to X MB. Because connection speeds for users vary, I would like to show a dialog that says something along the lines of "Your request is processing. Do not navigate away from this page. This dialog will close when the form is submitted successfully". Not verbatim but similar. The form posts to itself and is processed with PHP. I am not looking for a progress bar or anything. Just a friendly alert. I have been looking at the jQuery UI documentation but the examples show a confirmation which requires user intervention to continue. I just want a placeholder while the processing is happening. Any this or links are appreciated.

Thanks in Advance

Answer 1

So after some tinkering and hours of searching I was able to piece together a working solution that doesn't require any Ajax. Here it is:

The HEAD Section

<script type="text/javascript">
    $(document).ready(function (){
        $("#loading-div-background").css({ opacity: 1.0 });
    });

    function ShowProgressAnimation(){
        $("#loading-div-background").show();
    }
</script>

The CSS

#loading-div-background{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
}

#loading-div{
    width: 300px;
    height: 150px;
    background-color: #fff;
    border: 5px solid #1468b3;
    text-align: center;
    color: #202020;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url("/css/pie/PIE.htc"); /* HANDLES IE */
}

The HTML (Truncated to illustrate necessary parts)

<form id="frm_send" name="frm_send" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
// Fields omitted for brevity
<input type="submit" id="submit" name="submit" class="button" onclick="ShowProgressAnimation();" value="Send">
</form>
<div id="loading-div-background">
  <div id="loading-div" class="ui-corner-all">
    <img style="height:32px;width:32px;margin:30px;" src="/images/please_wait.gif" alt="Loading.."/><br>PROCESSING. PLEASE WAIT...
  </div>
</div>

And the end result looks like this.

Prevents the user from interfering with the process (unless of course they click stop or exit the browser (obviously)). Works very nicely, it's clean and works across Chrome, IE, Firefox, and Safari using the latest jQuery and jQuery UI libraries included from Google Code repositories.

Answer 2

you could use jquery ui modal dialog and hide the close button

http://api.jqueryui.com/dialog/#entry-longdesc

Also you could use ajax to submit your form and then you can open the dialog before the request begins, and in the success function close the dialog using

$("#myDialog").dialog("close");

. I'm not sure how to check if a post is completed in PHP but if there is a way to do that you could do it there.

Answer 3

I use pnotify. It is a jQuery plugin that is really lightweight and super simple. It displays simple non intrusive dialogs. Check it out here.

Update

Here is a quick little example of how I handle notifying user of success/failure with pNotify. I have the pNotify updates wrapped up in their own functions so I don't have to repeat the code with each request but I think this should demonstrate how you can use it for user notification.

notify = $.pnotify({
    title: 'Working',
    text: 'Updating entry, please wait...',
    type: 'info',
    hide: false
});

$.post('ajax.php', meta, function (data) {
    if (data && data.status === 1) {
        notify.pnotify({
            title: 'Success',
            text: 'System successfully updated.',
            type: 'success',
            delay: 1500,
            hide: true
        });
    } else {
        notify.pnotify({
            title: 'Error',
            text: 'There was an error updating the system.',
            type: 'error',
            delay: 4000,
            hide: true
        });

    }

}, "json");