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在表單提交按鈕中加載動畫？

回答

相關問題