.submit JS function not displaying CSS overlay in Safari (unless I cancel page load)

Question

I'm having an odd problem with Safari in an overlay isn't displaying correctly on submitting the form.

What should happen is when the submit button on the form is clicked, the overlay appears over the form.

What is happening is that nothing is appearing (though it appears as though something is as I am unable to click said button again). What is interesting though is should I cancel the page load, the overlay appears.

Here is the javascript code that is running should the form be submitted.

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(){
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
    });
}

Here is the CSS for the "loading" class, for what it's worth.

.loading {
    background: rgba(#999, 0.9);
    bottom: -10px;
    display: none;
    left: -20px;
    position: absolute;
    right: -20px;
    top: -10px;

    .text {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        }
    }

The JavaScript is loading (the console logs the "In here" and "Show Overlay" phrases respectively, and if cancelled the overlay appears). However the overlay it doesn't appear on click.

I've tried on the following browsers, successfully....

Chrome (Apple Mac)
Firefox (Apple Mac)
Internet Explorer (Windows)

Any ideas would be helpful. Also if you need anything else, please let me know.

I have tried it with a z-index of 2000000 on the loading class. Still no joy. — Rhys Wynne, Apr 12 '16 at 13:13
What is firing the submit of the form? Try adding the overlay first, then submitting the form. — hooda, Apr 12 '16 at 13:27
The overlay displays (if I remove display: none; it displays). Also the console log shows "Show Overlay", when the form is submitted (also "Hide Overlay" if the display: none; is not present). It's just not reflecting on the main site... — Rhys Wynne, Apr 12 '16 at 13:48

score 3 · Answer 1 · answered Apr 20 '16 at 03:04

3

Checked in safari/windows and it is working fine. I suppose the problem was background: rgba(#999,0.9). You can check by interchanging comments for these lines in css-

/*background: rgba(#999, 0.9);*/
background: rgba(158,158,158,0.9);

Please refer this fiddle.

answered Apr 20 '16 at 03:04

Developer107

1,648
2
11
23

That's not it sorry. I think it's because in your fiddle the `e.preventDefault();` is preventing the default action of the form happening. We want the action of said form to happen as well as the overlay. – Rhys Wynne Apr 22 '16 at 10:15
I can see the overlay even in safari/windows. What is the exact issue here? – Developer107 Apr 22 '16 at 10:53
Sorry, yes yours is working. The issue is though we need the button press to work. So applying it to our solution shows the overlay, but the action of the form isn't working (so the various PHP scripts that run on submission of the form, don't run). Hope that's a clarification. Sorry I didn't mention it. – Rhys Wynne Apr 25 '16 at 13:27
That is because `e.preventDefault()` is added in submit handler. Comment that line and try. – Developer107 Apr 26 '16 at 03:07

score 2 · Answer 2 · answered Apr 26 '16 at 11:42

From what I remember Safari will block drawing stuff once it starts loading a page. Did you try preventing the submit, doing your stuff and just then submitting?

Something like this could work:

function main_form_overlay() {
var form_outer = jQuery('.main-form'),
form = jQuery('.main-form form'),
html,
overlay;

html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(event){
        //Prevent the form from submitting
        var e = event || window.event;
        e.preventDefault();
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
        //Submit the form now
        $(this).submit();
    });
}

That's one route I thought, the problem is that it causes a loop, as once you submit at the bottom at `$(this).submit()`, then the `form.on('submit'` runs again. If there was a way to run it once, I'd love to hear it! :) — Rhys Wynne, Apr 26 '16 at 13:32
Well then I would suggest maybe setting an on 'click' listener to the form button instead, preventing default and then submitting the form via $('#form_ID').submit(); ? — PeterTheLobster, Apr 26 '16 at 22:02

score 2 · Accepted Answer · answered May 10 '16 at 15:26

As an aside, I managed to fix this, and @PeterTheLobster came closest.

In short, in attaching to the 'click' listener, we then e.preventDefault(); the form, made sure the overlay was displayed by delaying the submission of the form by 1 second.

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading-overlay"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading-overlay');

    jQuery('#gform_submit_button_2').on('click', function(event){
        //Prevent the form from submitting
        var e = event || window.event;
        e.preventDefault();
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }

        //Submit the form now
        window.setTimeout(function() {
            form = jQuery('.main-form form');
            form.submit();          
        },1000);
    });
}

score 1 · Answer 4 · answered Apr 19 '16 at 17:13

1

Think you have an other problem. Are you sure the var overlay is at the right moment pointing your elements? Or is it undefined?

I think it is not pointing it. Just make a test. Put <div class="loading">testmessage</div> to your html and just add/replace the innerHtml on your function.

In that case you can be sure overlay = jQuery('.main-form .loading'); is valid.

answered Apr 19 '16 at 17:13

Jan Franta

1,521
2
14
24

Yeah I've checked it and it's defined correctly. I did a console.log of it as well of the changed testmessage to something else. So it isn't that.... – Rhys Wynne Apr 22 '16 at 10:52

.submit JS function not displaying CSS overlay in Safari (unless I cancel page load)

4 Answers4