Ladda Button will not work in Safari

Tearing my hair off of it.

Here is my button

<button type="submit" class="btn btn-primary ladda-button" data-style="zoom-in">
    <span class="ladda-label">
        Submit
    </span>
</button>

using

Ladda.bind('.ladda-button', { timeout: 2000 });

or

Ladda.bind('button[type=submit]');

It works as advertised in Chrome, but not in Safari.

The only thing I managed to get is

var l = Ladda.create( document.querySelector('.ladda-button'));
$(document).on('click', '.ladda-button', function() {
    l.start();
});

which shows the counter, but the form is not submitted.

So i tried this

var l = Ladda.create( document.querySelector('.ladda-button'));
$(document).on('click', '.ladda-button', function() {
    l.start();
    $(this).submit();
});

but it does not work; the form will not be submitted. Not sure what to do at this point, since I also tried a few examples in code and from SO, and no one works; counter refuses to display.


Update

A hacker solution has been detected, but it is incompatible.

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

However, if I delete alert(), the counter does not show; and the spinner is not ideally located in the button.

There is bald at this moment ...

Update 2

It really works if I have something that interferes with the normal sending flow.

Sweet Alert, . Ladda , , Safari Ladda ?

<div class="form-group text-center m-t-30">
    <button class="btn btn-primary btn-block btn-lg ladda-button" type="submit" data-style="zoom-in" id="registration">
        Sign Up
    </button>
</div>

javascript

$(document).on('click', '#registration', function(e) {
    e.preventDefault();
    swal({
        title: 'Confirm',
        input: 'checkbox',
        inputValue: 0,
        inputPlaceholder: 'Agree',
        confirmButtonText: 'Continue',
        confirmButtonColor: '#5d9cec',
        showCancelButton: true,
        cancelButtonColor: '#fffff',
        reverseButtons: true,
        inputValidator: function (result) {
            return new Promise(function (resolve, reject) {
                if (result) {
                    resolve();
                } else {
                    reject('Do you agree?');
                }
            })
        }
    }).then(function (result) {
        $('#form-registration').submit();
    });
    $.ladda('stopAll');
});
+4

Source: https://habr.com/ru/post/1688604/


All Articles