Ask A Question

Notifications

You’re not receiving notifications from this thread.

Button Loading Animations with jQuery UJS Discussion

Innokenty Longway Innokenty Longway

Thank you! Really simple. :)

Reply

Works also with button_to, but to invoke font awesome [... remove needles spaces in what follows ...] data: {disable_with: raw(" < i class='fa fa-spinner fa-spin'> < /i>One moment please...")}

Reply

I just fixed the example code in the notes. It was getting automatically removed on accident.

Reply
Maxime Sahroui Maxime Sahroui

Nice tutorial... as always :'D
Thanks!

Reply
Maxime Sahroui Maxime Sahroui

I have a little problem here!
As you can see on my screenshot (http://imgur.com/XMlcVv7), the spin doesn't show itself... And I don't know why...

Here is my code :

<%= f.button "Sign in", class: "btn btn-primary", data: { disable_with: " Connexion en cours..." } %>

I see "Connexion en cours..." but not the spin

I have install font-awesome-rails (gem 'font-awesome-rails', '~> 4.1.0.0')

Thanks for your help!

Reply
Justin Seiter Justin Seiter

This post was just in time. I was looking for a dead-simple submit feedback animation. Perfect. :)

Reply

Chris, thank you so much for this! I've been struggling getting fontawesome to work with my buttons. Perfect timing. Your videos rock!

Reply
Tomasz Panek Tomasz Panek

Thank for this nice tip :)

Anyway, how can i acheive this with haml and inside link_to?? I try with:

= button_to "Go Rails!".html_safe, akcept_path, method: :patch, class: 'btn btn-success', data: { disable_with: " Waiting..." in my label instead <button class..="" thx="">

Reply

You might just be missing the ending curly brace. This works for me:

= button_to "Go Rails!".html_safe, events_path, method: :patch, class: 'btn btn-success', data: { disable_with: " Waiting..."}

Reply

Nice :)

Reply

Fantastic stuff. Thanks for your efforts.

Reply

simple and cool.

Reply

Having a bit of a problem with this. The disable action works, but the icon never shows up. However, if I have the icon already spinning somewhere else on the page first, the icon does show up when I click the button. What gives? Is it not loading fontawesome because there's none of the font there at page load?

Reply

That's interesting. Do you get any errors in the console that show the browser having trouble loading the icon font by chance?

Reply

Did you get anywhere with this? Im getting the same issue in Chrome, but its working fine in Firefox.

Reply
Yes, this doesn't work in Safari.  Even this page https://gorails.com/users/sign_in does not in Safari.
Reply

Christoper Drane's solution above is an awesome supplement to Chris' tutorial. I had the same issue - font awesome was not working until after the spinner was cached. I switched to a pure CSS solution per http://stephanwagner.me/only-css-loading-spinner using relative positioning and on a div itself instead of the before pseudo element. Much faster, no hiccups, and works everywhere!

Reply

Does this only work with a submit button? ie it won't work with type: "button" ?

Reply

Did you ever figure this out? I'm also not having success with a button that has the 'button' type

Reply

Great tutorial! Just curious how I could implement this using the 'Font-Awesome-Sass' gem? I tried it, but it's throwing an error because of it having an ERB tag within an ERB tag.

Reply

What's your code look like?

Reply
Storm Trooper Storm Trooper

Ok a question here, I used what you taught on a form and it worked perfectly. Now I tried using it on a form that has multiple file fields and it didnt work... using carrierwave.. would there be a specific reason why that wouldnt work?

Reply

Paste a Github gist of your code and the HTML it generates and I'll take a look for ya!

Reply

How can we use with f.submit tag

Reply

Unfortunately you can't because it doesn't allow HTML inside of it.

Reply

This is great. Thanks for the great videos as usual. When using a button that is rending info through ajax, how do you enable the original button? My fa-icon jus keeps spinning. My code: <%= link_to 'Stats', course_heat_map_path(@course, lesson), remote: true, class: 'expandable tiny label', data: {disable_with: " Calculating Stats..."} %> and it is grabbing data from a .js.erb page and rendering it. Thanks in advance

Reply

You can use Rails UJS directly to do that. I use this and the @form variable is just a jquery selector for the form

$.rails.enableFormElements @form

Reply
Jeramae Bohol Jeramae Bohol

The loading animation works except the spinning icon doesn't show up. I'm using Chrome on Windows 7 if that matters. Any help? Thanks!

Reply

Thank you so much. This is awesome. Been looking for this for ages.
How do I do this for submit_tag? Couldn't get the spinner working. This is what I have right now
<%= submit_tag :Search, class: "btn btn-primary", data: {disable_with: "Searching..."} %>

Reply

You actually can't do this with submit tags because it generates an input field which doesn't allow HTML in the value. You must use a button, but it renders the same and also still submits the form so basically no difference.

Reply

Im clicking a link in my navbar...If I wanted to get this same function but have the loading indicator display in the middle of the page instead how would I achieve this?

Could you render a partial or do

disable_with: "<div class="loading-indicator" <="" div="">" then css that class ?

Reply

You probably could actually. You'd need to probably do some hacky things for that CSS, but it could work. However, if you're doing something more complicated than just changing the button text, I might encourage you to just use regular old jQuery to listen to the click or form submit and do the work there. Then you can put your loading-indicator div anywhere you like on the page and your CSS can be relative to its parent div.

Reply

Anyone seeing this not work in Safari? It works in Crome.

Reply

I see the same issue. Works great in Chrome and Firefox but no Safari love.

Reply

Hey Chris, this screencast is an oldie but a goodie. I'm trying to implement this ujs action throughout my new rails app and I'm having success except with the Stripe submit payment button. The button gets disabled through the Stripe javascript call that disables it separately instead of a line of ruby with the button code and I'm unsure as how to incorporate Font Awesome. Have you had any experience integrating this animation on stripe buttons. I have a stackoverflow question addressing it: http://stackoverflow.com/qu...

I'm wondering if I could just eliminate the $('.submit-button').attr("disabled", "disabled"); line

and instead call the disable_with right from the button code.
What do you think?

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 84,256+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.