Button spinner setup
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi,

I need your help. I use Hakim's script Ladda for button spinner http://lab.hakim.se/ladda/ or https://github.com/hakimel/Ladda

Option 1.
With >> Ladda.bind ('.ladda-button', {timeout: 5000});

everything's fine if user fill form and server processing script until 5 sec. If server take more than 5 sec. spinner disappears and user again presses the button and then the form sends 2 times.

Option 2.
Without >> Ladda.bind ('.ladda-button', {timeout: 5000});

form works perfectly but, the problem is that if user doesn't enter some data in the form, the button doesn't stop with spinner animation and user after typing required, can't press SEND button again.

Test form currently with Option 1 http://www.copy-electronic.hr/button

awarded to alv-c

Crowdsource coding tasks.

1 Solution

Winning solution

Create a variable with the Ladda.create method. So you can manipulate the spin in the button

var l = Ladda.create( document.querySelector( '.ladda-button' ) );

Then, in the validation method (in js) you will call

l.start();

Only if the validation passes, then you call

l.stop()

When the xmlhttp request finishes

Update

You put the code in the same place.

Move l.start() to the beforeSend: function() method and move l.stop() to the success: function() method.

It should finally look like this:

$(form).ajaxSubmit(
{
    beforeSend: function()
    {
        l.start();
        $('#sky-form button[type="submit"]').attr('disabled', true);
    },
    success: function()
    {
        l.stop();
        $("#sky-form").addClass('submited');
    }
});
Hi alv-c, I put exactly what you said (check at bottom http://www.copy-electronic.hr/style/js/button.scripts.v1.0.2.js), but now spinner doesn't exist. Can you just clarify further. Check http://www.copy-electronic.hr/button
Saaskoo over 4 years ago
I updated the solution
alv-c over 4 years ago
Same problem. Spinner doesn't show after press button. Check http://www.copy-electronic.hr/style/js/button.scripts.v1.0.3.js
Saaskoo over 4 years ago
Haha, now you deleted var l = Ladda.create( document.querySelector( '.ladda-button' ) );. Leave that line where it was
alv-c over 4 years ago
Upss, wait a little :)
Saaskoo over 4 years ago
Hehehe, yes :D Now work like a charm! Thanks man :)
Saaskoo over 4 years ago
Hi Alvaro, I have one question. Can you help me for the same Ladda button to add the option progress bar? If you want I can open a new post for payment, but would like to get rid of because I see that you are familiar with this script. Just tell me, I will do that gladly :)
Saaskoo over 4 years ago