web-dev-qa-db-ja.com

data-disable-withのhtmlをRails submit_tagに設定する方法

ブートストラップを使用したRoRアプリがあります。 fontawesome htmlアイコンタグをsubmit_tagヘルパーに適用しようとしていますが、サポートされていないようです。 [送信]をクリックすると、無効化コンテンツはhtmlに解釈されるのではなく、文字列として表示されますが、link_toヘルパーの場合は表示されます。

これがerbです：

    <%= form_tag("/home/search", method: "get", class: "form-inline", role: "search", remote: true) do %>
    <div class="form-group">
        <%= text_field_tag(:term, nil, {:class => "form-control", "data-html" => true, :value => @term}) %>
    </div>
    <%= submit_tag "Go!", class: "btn btn-transparent", role: "button", 'data-disable-with' => "<i class='fa fa-spinner fa-spin'></i> Searching...".html_safe %>    
 <% end %>

[送信]をクリックすると、次のように表示されます。 enter image description here

Link_toで機能しますが、text_field_tagからlink_toに値を渡すことはできません。それ以外の場合は、その解決策に満足しています。自分で.ajaxメソッドを記述したり、javascriptを使用してボタンの値を操作したりすることは避けたいと思います。標準のFormHelperタグを使用してこれを解決する方法に関する提案はありますか？よろしくお願いします。

htmltwitter-bootstrapruby-on-rails-4erb
23
Slenny

submit_tagをbutton_tagに変更してみてください。次のようになります。

<%= button_tag "Go!", class: "btn btn-transparent", 'data-disable-with' => "<i class='fa fa-spinner fa-spin'></i> Searching...".html_safe %>
33
lavilet

simple_formを使用する場合：

<%= f.button :button, 
             'Save', 
             class: 'my-class', 
             data: { 
               disable_with: '<i class="fa fa-spinner fa-spin"></i>'
             } %>
5
Jeremy Lynch

私はRailsをほぼ10年間使用していますが、disable_with...に出くわしました。

生のHTMLを挿入したくない場合は、content_tag helperを使用することもできます...たとえば（単純なフォーム）：

= form.button :button,
              t('.submit'),
              class: 'btn btn-primary btn-block', \
              data: { \
                disable_with: [
                  content_tag(:span, '', class: 'spinner-grow spinner-grow-sm'), \
                  content_tag(:span,'Please wait...') \
                ].join \
              }

もちろん、ヘルパーにリファクタリングする方がおそらくクリーンです...

# frozen_string_literal: true

module ApplicationHelper # :nodoc:
  def disable_with_element(text = t('please_wait'))
    [
      content_tag(:span, '', class: 'spinner-grow spinner-grow-sm'),
      content_tag(:span, text)
    ].join
  end
end

= form.button :button,
              t('.submit'),
              class: 'btn btn-primary btn-block', \
              data: { \
                disable_with: disable_with_element \
              }

これらの例では、SimpleFormとSlimを使用していることに注意してください。

0
Joe

Html_safeおよびdisable_withを使用してbutton_toを生成するための簡単なヒント：

<%= button_to some_path, method: :post, class: 'btn btn-md btn-primary', "data-disable-with": '<span class="fa fa-2x fa-spinner fa-spin"></span>'.html_safe do %>
  <span class="fa fa-2x fa-facebook-square"></span>
<% end %>
0
Ben