6

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!

j08691
  • 204,283
  • 31
  • 260
  • 272
shorn
  • 1,327
  • 5
  • 15
  • 20
  • I'm using safari 5.1.3, and it seems to be working http://jsfiddle.net/dhirajbodicherla/MF7J5/3/ Please tell me if I missed out something. – Dhiraj Mar 29 '12 at 23:43
  • Nope that Fiddle looks about right. Strange. The form I'm using is a Safecracker one, as part of Expression Engine, although I don't think that should cause the problem. Im on 5.1.5. When using Develop>User Agent - it works in all browsers bar Safari (Mac), and iOS Safari (which I knew about) but every other one is fine. Just Safari! – shorn Mar 30 '12 at 00:04
  • Ideally safecracker shouldn't cause any problem, do you see any weird errors in your firebug console ? – Dhiraj Mar 30 '12 at 00:18
  • Thats the problem, I'm not quite sure how to check for errors? (Very new to this!) The strange thing is, on the multiple times I have tested it, occasionally it does pop up after several seconds, but its certainly not instantly after I click "Submit" like in the other browsers! – shorn Mar 30 '12 at 06:57
  • Just been checking on Safari on iPad, and it works on there too! Grrr! Beginning to think it might be a bug with 5.1.5 as its the only browser not to show it! – shorn Mar 30 '12 at 23:16
  • OK, I added the exact code that you put in the fiddle earlier, and it does now display upon clicking the submit button, but the form does not submit. I am presuming that this has something to do with return false? – shorn Mar 31 '12 at 10:20
  • yes it is because of return false, you may just ignore that line and your code should work fine – Dhiraj Mar 31 '12 at 12:58
  • Thats the problem, if I remove that line, the form still submits but the div does not show. ?? – shorn Mar 31 '12 at 13:09
  • I'm having the same problem overhere. The only thing I can say with my tests is that if the form would not pass my Jquery verification, everything works. But if it passes, it seems that all that verification (and all actions in the jquery .submit function) are bypassed. – Fredy31 Apr 10 '12 at 14:44

3 Answers3

7

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 :)

Just-Nick
  • 141
  • 1
  • 8
6

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();
}
Oliver Manner
  • 97
  • 1
  • 5
1

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

Philll_t
  • 4,267
  • 5
  • 45
  • 59