Rails：如何使用jQuery UJS在表单提交按钮中加载动画？

我正在努力尝试在我的登录表单按钮上使用jQuery，以便当用户单击“登录”时，文本更改为“正在登录..”以获得更好的用户体验。但我一直在收到错误。我已将我的代码放在下面以及我的错误消息。任何帮助将是惊人的:)谢谢你这么多Rails：如何使用jQuery UJS在表单提交按钮中加载动画？

_login.html.erb（工作没有加入jQuery的）

<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（添加不工作的jQuery）

<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>

错误消息

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

来源

2017-08-11 Omar

根据文档：

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

您需要先通过值，则选项，请尝试使用：

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

来源

2017-08-11 02:00:38

非常感谢塞巴斯蒂安！它工作得很好，如果我想添加一个类和ID，所以我可以风格我的按钮会这样很好'<％= f.button'登录'.html_safe，类：“btn btn默认自定义”id：“loginsubmit “，输入：：submit，：data => {：disable_with =>”正在登录......“}％>' – Omar

太棒了！（注意你在id之前错过了昏迷）。 –

谢谢十亿塞巴斯蒂安:)有一个惊人的一天冠军 – Omar

尝试使用的

:data =>

代替

data:

和

:disable_with =>

代替

disable_with:

希望这有助于！

编辑： 测试和工作：

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

来源

2017-08-11 01:54:59 Crashtor

非常感谢你的帮助。它几乎与你的前两个一起工作。但是，我收到了一条错误消息 - sebastian发现了什么是错的 - 我必须先传递“登录”的值。所以这工作得很好'<％= f.button'Log In'.html_safe，type：：submit，：data => {：disable_with =>“登录...“}％>'再次感谢你:) – Omar

啊，很酷！很高兴它的工作。 – Crashtor

更改您的代码像这样：

<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>

来源

2017-08-11 02:04:49 xiaocui

Rails：如何使用jQuery UJS在表单提交按钮中加载动画？

回答

相关问题