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

Bettyannbettye

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.

Bettyannbettye

I like this solution as it is simple and does not require a plugin. I did have to tweak it a bit to make it work the way I wanted it to, but this example got me 95% of the way there quickly. Thanks! – Tamica

Awesome, I'm glad it helped. I was really pleased with the result and not having to use a plugin either. – Bettyannbettye

This is great! Got is implemented in just a few mins. So glad I didn't have to reinvent the wheel. – Televise

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.

Davina

From the client-side, since the script posts to itself for processing, the page will refresh once the contents of the form upload are completed. So if a user tries to upload a 10mb file, they will see an hour glass icon while the upload is occurring. Since the upload is the last part of the form it's safe to assume that the POST process is complete when the stream to the server is completed - the page refreshes at that time to run through the PHP validation. Good suggestion on Ajax, I will look into that. – Bettyannbettye

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");

Jewess

Thanks for this, I had not heard of it before. I'll look into it. Do you have an example of what I'm trying to accomplish. At first glance I don't see anything on their demos about using it onsubmit and then having it disappear when the page refreshes (Posts to itself for processing) – Bettyannbettye

I just create the notification when I submit the request and add a callback on the complete event the removes the notification. I'll try to put a little example code up in a few minutes. – Jewess

Thanks. I'll post what I end up throwing together once I get it working. – Bettyannbettye

I updated my answer to include a code snippet. I hope it helps. If you don't like pNotify, I'm sure their are other libraries you could utilize in the same manner. – Jewess