Rails: How to loading Animations with jQuery UJS in form submit button?

Question

I was working on trying to use jquery on my Login form button so that when a user clicks "Log In" the text changes into "Signing In.." for a better user experience. But I kept getting an error. I've placed my code below along with my error message. Any help would be amazing :) Thank you so much

_login.html.erb (Working no jquery added)

<div class="box" id="box2">
<p class="signinanywhere">Log into your account</p>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
  </div>
  <div class="field">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "off" %>
  </div>
<div class="row">
<div class="col-md-6">
  <% if devise_mapping.rememberable? -%>
<div class="" id="rememberanywhere">
  <%= f.check_box :remember_me %>
  <%= f.label :remember_me %>
</div>
  <% end -%>
  </div>
<div class="col-md-6">
  <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
  <%= link_to "Forgot password?", new_password_path(resource_name), id: "forgotanywhere" %><br />
<% end -%>
</div>
</div>
  <div class="actions">
<button type="submit" class="btn btn-default custom" id="loginsubmit"> Log in</button>
  </div>
  <%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), id: "facebookanywhere", :class => "btn btn-primary" %><br />
  <% end -%>
<% end -%>
<% end %>
</div>

_login.html.erb (Not working jquery added)

<div class="actions">
<%= f.button type: :submit, "Log In".html_safe,  data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Signing In..."} %>         
</div>

Error Message

SyntaxError at /
syntax error, unexpected ',', expecting =>
...e: :submit, "Log In".html_safe,  data: {disable_with: "<i cl...
...                               ^
/Users/oek203/Development/rails/sort2/app/views/pages/_login.html.erb:36: syntax error, unexpected keyword_do_block, expecting keyword_end
resource_class.omniauth_providers.each do |provider| 
^
/Users/oek203/Development/rails/sort2/app/views/pages/_login.html.erb:44: syntax error, unexpected keyword_ensure, expecting end-of-input

Sebastián Palma · Accepted Answer · 2017-08-11 02:00:38Z

5

According to the documentation:

button(value = nil, options = {}, &block)

You need to pass the value first, then the options, try with:

<%= f.button 'Log In'.html_safe,
  type: :submit,
  data: { disable_with: "<i class='fa fa-spinner fa-spin'></i> Signing In..." } %>

answered Aug 11, 2017 at 2:00

Sebastián Palma

33.6k6 gold badges45 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Omar Over a year ago

Thank you so much Sebastian!! It worked beautifully, if I wanted to add a class and id so i can style my button would this be fine

<%= f.button 'Log In'.html_safe, class:"btn btn-default custom" id:"loginsubmit",  type: :submit,   :data => {:disable_with => "<i class='fa fa-spinner fa-spin'></i> Signing In..."} %>

Sebastián Palma Over a year ago

That's great! (note you missed a coma before the id).

Omar Over a year ago

Thanks a billion Sebastian :) have an amazing day champ

Crashtor · Accepted Answer · 2017-08-11 02:07:35Z

1

Try using

:data =>

instead of

data:

and

:disable_with =>

instead of

disable_with:

Hope this helps!

Edit: Tested and working:

<%= f.button :submit, "Log In",  data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Signing In...".html_safe} %>

edited Aug 11, 2017 at 2:07

answered Aug 11, 2017 at 1:54

Crashtor

1,2791 gold badge13 silver badges22 bronze badges

1 Comment

Omar Over a year ago

thank you so much for your help. It almost worked with your first two. But, I got an error message - sebastian spotted what was wrong - I had to pass the value "Log In" first. So this worked beautifully

<%= f.button 'Log In'.html_safe,  type: :submit,   :data => {:disable_with => "<i class='fa fa-spinner fa-spin'></i> Signing In..."} %>

Thank you so much again :)

Sebastián Palma · Accepted Answer · 2019-05-17 12:07:30Z

1

Change your code like this:

<div class="actions">
  <%= f.button "Log In".html_safe,
      type: :submit,
      data: { disable_with: "<i class='fa fa-spinner fa-spin'></i> Signing In..." } %>         
</div>

edited May 17, 2019 at 12:07

Sebastián Palma

33.6k6 gold badges45 silver badges65 bronze badges

answered Aug 11, 2017 at 2:04

Evan

5714 silver badges12 bronze badges

1 Comment

Sebastián Palma Over a year ago

Why "Log In".html_safe?

Collectives™ on Stack Overflow

Rails: How to loading Animations with jQuery UJS in form submit button?

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related