Not working on Safari after form submit with page reload #71

timgavin · 2017-11-09T01:59:05Z

Using Safari 11.0.1 / macOS High Sierra

I've been having issues with Ladda lately in Safari, so I created the following page to test, keeping it as simple as possible. Ladda does not work; no spinner...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.css" rel="stylesheet">
</head>
<body>
    <form method="POST">
        <button type="submit" class="ladda-button" data-style="zoom-in">
            Submit
        </button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/spin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.js"></script>
    <script>
        Ladda.bind( 'button[type=submit]', { timeout: 2000 } );
    </script>
</body>
</html>

I tried the following Javascript too with the same result: no spinner

$('form').submit(function (e) {
    var l = Ladda.create(document.querySelector('.ladda-button'));
    l.start();
});

The text was updated successfully, but these errors were encountered:

timgavin · 2017-11-09T02:42:00Z

After playing around a little more, I'm starting to think that Safari just submits the form so quickly that Ladda doesn't have time to load. If I put in a dummy URL, submit the form and then hit the back button I'll see a frozen spinner.

If this is what's actually happening... is there a workaround for it?

theodorejb · 2017-11-09T02:59:46Z

I don't have a Safari browser to test with, but I think you are probably right about it submitting the form before you have a chance to see the spinner.

In my opinion (I'm not the original creator of Ladda) it's not a good idea to use the bind function, as it is somewhat hacky and can lead to issues like this. I would recommend only using Ladda for AJAX forms, where you can manually start the spinner and stop it when the HTTP request completes.

timgavin · 2017-11-09T14:31:34Z

@theodorejb

I also tried the following instead of bind, which is intermittent; sometimes it will work, sometimes it won't.

$('form').submit(function (e) {
    var l = Ladda.create(document.querySelector('.ladda-button'));
    l.start();
});

This is quite frustrating, actually, because I'd like to give the user some feedback on a regular form, and because Ladda is working perfectly in Chrome on all forms - AJAX or otherwise.

theodorejb · 2017-11-09T14:41:19Z

I think the issue is that a regular form submission reloads the page, and there's no guarantee that JavaScript/CSS animations will run smoothly during the reload. Some browsers do it, and others don't. That's why I recommend only using Ladda with AJAX forms, where you can control when the spinner starts and stops.

Honestly, I think we should consider deprecating the bind function and removing it in the next major release given that there doesn't seem to be a way to ensure that it works as expected in all browsers.

timgavin · 2017-11-09T21:49:00Z

I'd like to have some kind of feedback when uploading images, videos, etc. that doesn't involve AJAX. Was hoping Ladda would be it. :(

theodorejb · 2017-11-09T21:51:00Z

Doesn't the browser have some kind of built-in loading indicator when submitting a standard form?

timgavin · 2017-11-09T23:37:58Z

Yeah, but I don't think anybody who isn't technical really pays attention to that, do they?

terales · 2017-12-14T20:38:09Z

Totally agree with @timgavin.

Please, do not remove ability to use Ladda on buttons which triggers page reloads. Let's figure out a way to Safari and find a solution.

terales · 2017-12-14T21:10:08Z

Tested with saucelabs.com

Ladda script was evaluated and run successfully, but no frames were rendered between click and page reload.

I'll try to find a solution for this

terales · 2017-12-14T23:06:45Z

I think I found a solution. It's hacky and dirty right now, but I need some confirmation from a real Safari experience.

Problem: Safari won't repaint anything during submit event or page reloading.

Solution is to force Safari to do redraw. There are several approached to do that:

What I've found is that we need to force spin.js to use timer based animation, so it would be possible for us to force redraw every tick. I think it's possible to do it in a cleaner and isolated way, but right now I need a proof of concept.

@timgavin can you check https://terales.github.io/Ladda/test/bootstrap.html, please?
Does form submit work for you?

timgavin · 2017-12-14T23:51:38Z

@terales The form submits but Ladda does not show. There's a 404 error in the console; could a required object be missing?

terales · 2017-12-15T00:56:10Z

No, this error is for Twitter stuff. I have no idea what could we try next. Maybe you can try intersept submit event, start Ladda and submit form after 1 ms or so?

…

On Fri, Dec 15, 2017, 1:51 AM tim gavin ***@***.***> wrote: @terales <https://github.com/terales> The form submits but Ladda does not show. There's a 404 error in the console; could a required object be missing? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#71 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB1Of2sv6cUvmck0Y-b6Ke4MJBClL1azks5tAbSRgaJpZM4QXUu8> .

terales · 2018-01-02T07:33:48Z

@timgavin could you update issue title to "Not working on Safari after form submit with page reload", please?

jloguercio · 2018-10-30T22:41:03Z

This issue still without a solution?

terales · 2018-10-31T18:23:07Z

Yes, the only solution is to do it by yourself:

intercept form submit event,
call event.preventDefault and wait for the animation,
call form's submit event.

salimbaig916 · 2019-04-10T10:45:54Z

In IPAD or iphone the web chat i have a submit button , but in safari the web browser in not working

terales · 2019-04-10T12:18:32Z

@salimbaig916 Yes, the only solution, for now, is to implement this behaviour by yourself:

intercept form's submit event,
call event.preventDefault and wait for the animation,
call form's submit event.

ThinkBIG-Company · 2020-05-14T23:19:14Z

I have fixed this issue plus backed this library with an feature that implements feedback after the progress reached 100%.
I will made a pull request very soon.

timgavin changed the title ~~Not working in Safari~~ Not working on Safari after form submit with page reload Jan 2, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not working on Safari after form submit with page reload #71

Not working on Safari after form submit with page reload #71

timgavin commented Nov 9, 2017 •

edited

timgavin commented Nov 9, 2017

theodorejb commented Nov 9, 2017

timgavin commented Nov 9, 2017

theodorejb commented Nov 9, 2017 •

edited

timgavin commented Nov 9, 2017

theodorejb commented Nov 9, 2017

timgavin commented Nov 9, 2017

terales commented Dec 14, 2017

terales commented Dec 14, 2017

terales commented Dec 14, 2017

timgavin commented Dec 14, 2017

terales commented Dec 15, 2017 via email

terales commented Jan 2, 2018

jloguercio commented Oct 30, 2018

terales commented Oct 31, 2018

salimbaig916 commented Apr 10, 2019

terales commented Apr 10, 2019

ThinkBIG-Company commented May 14, 2020

Not working on Safari after form submit with page reload #71

Not working on Safari after form submit with page reload #71

Comments

timgavin commented Nov 9, 2017 • edited

timgavin commented Nov 9, 2017

theodorejb commented Nov 9, 2017

timgavin commented Nov 9, 2017

theodorejb commented Nov 9, 2017 • edited

timgavin commented Nov 9, 2017

theodorejb commented Nov 9, 2017

timgavin commented Nov 9, 2017

terales commented Dec 14, 2017

terales commented Dec 14, 2017

terales commented Dec 14, 2017

timgavin commented Dec 14, 2017

terales commented Dec 15, 2017 via email

terales commented Jan 2, 2018

jloguercio commented Oct 30, 2018

terales commented Oct 31, 2018

salimbaig916 commented Apr 10, 2019

terales commented Apr 10, 2019

ThinkBIG-Company commented May 14, 2020

timgavin commented Nov 9, 2017 •

edited

theodorejb commented Nov 9, 2017 •

edited