show div upon form submit, works in Chrome, FF, IE but not Safari

Question

Not sure where to go with this.

I have a form, which when submitted, I would like to display a "processing, please wait" message. (The form has photos to upload so might take a while)

I have the following jQuery

$(document).ready(function() {
    $('#addnews').submit(function() {
        $('#loading').show();
    });
});

addnews is my form id, and the div in my template is

<div id="loading">Please wait, your news is being submitted...
    <img src="/-/images/addwalk-loader.gif"/>
</div>

with this css

#loading{
    display:block;
    display: none;
    background:#399f8a;
    color:#FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding:10px;
    margin-top: 10px;
}

.loading img{
    float: right;
}

Now this is working when I hit Submit in FF(Mac), Chrome(Mac&PC) and IE9(although the gif does not animate, but I know thats a separate issue)

but it does not seem to want to work on Safari on the mac. Any ideas, if theres something in what I have thats stopping it? Or what the best way to debug it is? Thanks!

Answer 1

I have experienced problems with something very similar where on submit of a payment form we displayed a loading popup which covered the whole screen to try stop people from reloading the page and resubmitting if they thought it was taking too long. However in Safari the loader never seemed to appear.

After watching the console a bit for clues I realised that all of the css changes were happening and being applied to the page however I simply wasn't seeing these reflected on screen.

I concluded that this was due to how safari handled content rendering during page loads. Once a page load is fired (i.e. from a link or a form submit) safari stops rendering any further changes to the display.

What this means is you need to get your loading animation in place before you fire the submit off. Applying this kind of thinking to my own code resolved the issues.

For you this would mean something like this...

$(document).ready(function() {
    $('#addnews').submit(function(e) {
        e.preventDefault();
        $('#loading').show();
        $(this).submit();
    });
});

However this raises another issue which is, since submit is the triggering event and the event we want to fire we create an infinite loop which will never submit due to us preventing the default.

To resolve this you either need to not trigger everything off the submit or we can do something like this...

$(document).ready(function() {
    $('#addnews').each(function(){
        this.preventNextSubmit = true;            
    }).submit(function(e) {
        if(this.preventNextSubmit == true){
            this.preventNextSubmit = false;
            e.preventDefault();
            $('#loading').show();
            $(this).submit();
        }
    });
});

This example initially adds a boolean to the form set to true. If it is true it suppresses the form submit and instead shows the animation, then it resets the boolean and calls submit again which will now just submit as normal.

I hope this helps :)

Answer 2

This worked for me. Don't really know why, but maybe Safari needs a little break to really show it before submit :) Submit seems to halt some events on page. Animated GIFs freeze on submit on Safari and IE but in Chrome and FF they still roll during submit process.

$(document).ready(function() {
    $('#addnews').submit(function() {
        setTimeout(gogo,1);    
    });
});

function gogo() {
    $('#loading').show();
}

Answer 3

It seems that this is an issue that would require you to prepare the state of the page you want it to be in before the submit happens. So, if you are not too attached to the form having a type='submit' button then here's the proper solution:

Step 1

Change your submit button to a normal button.

Step 2

<input type="button" class=".fake_submit" value="Submit" />

Bind the function that shows the overlay like so:

$(".fake_submit").click(function(){
      $('.overlay').fadeIn(function(){
    $(form).submit();
   });
});

The fade in anonymous function acts like a time delay so by the time the form actually fades in, the state of the overlay would have already been set. This worked for me.

Bonus Tip

If you want an animation of some kind, Safari seems to prevent gifs from doing what they were born to do. Maybe a bug, or maybe the Apple folks decided it was pointless to waste resources on a page that's about to go out. Whatever the reason, they didn't seem to include animations in this. So, you can use a CSS3 animation loader in place of a gif and in the Desktop version of Safari, this seems to still work. You can find a cool animation here:

http://fortawesome.github.io/Font-Awesome/examples/#animated