Button Loading Animations with jQuery UJS Discussion
Innokenty Longway
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...")}
I just fixed the example code in the notes. It was getting automatically removed on accident.
Maxime Sahroui
Nice tutorial... as always :'D
Thanks!
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!
Justin Seiter
This post was just in time. I was looking for a dead-simple submit feedback animation. Perfect. :)
Chris, thank you so much for this! I've been struggling getting fontawesome to work with my buttons. Perfect timing. Your videos rock!
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="">
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..."}
MAteusz
James M
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?
That's interesting. Do you get any errors in the console that show the browser having trouble loading the icon font by chance?
Did you get anywhere with this? Im getting the same issue in Chrome, but its working fine in Firefox.
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!
Does this only work with a submit button? ie it won't work with type: "button" ?
Did you ever figure this out? I'm also not having success with a button that has the 'button' type
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.
What's your code look like?
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?
Paste a Github gist of your code and the HTML it generates and I'll take a look for ya!
rajnik
How can we use with f.submit tag
Unfortunately you can't because it doesn't allow HTML inside of it.
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
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
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!
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..."} %>
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.
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 ?
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.
Anyone seeing this not work in Safari? It works in Crome.
JFGrissom
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?
Would love this episode revised with Stimulus.
Rails UJS still makes this work exactly the same as it always has. There's really no need for Stimulus for this.
Hey Chris, it looks like somehow I convinced myself that Stimulus should replace any and all JS related stuff. Thanks for clarifying.