如何在 data-disable-with 上设置 html 到 rails submit_tag答案

【问题标题】：How to set html on data-disable-with to rails submit_tag如何在 data-disable-with 上设置 html 到 rails submit_tag
【发布时间】：2014-08-24 07:17:30
【问题描述】：

我有一个使用引导程序的 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 %>

当我点击提交时，结果如下：

它适用于 link_to，但我无法将 text_field_tag 中的值传递给 link_to，否则，我会对这个解决方案感到满意。我真的宁愿避免自己编写 .ajax 方法并使用 javascript 来操作按钮值。有关如何使用标准 FormHelper 标签解决此问题的任何建议？非常感谢。

【问题讨论】：

试试这样<%= submit_tag "Go!", class: "btn btn-transparent", role: "button", data: { disable_with: "<i class='fa fa-spinner fa-spin'></i> Searching...".html_safe} %>
嗨，帕万，是的，肯定也试过这样。同样的事情......：\
@Pavan 你不能使用submit_tag，但使用button_tag 可以。

标签： html twitter-bootstrap ruby-on-rails-4 erb

【解决方案1】：

您应该尝试将 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 %>

【讨论】：

谢谢 Lavilet，这个 button_tag 成功了，这正是我所需要的。
这绝对是正确答案。 submit HTML 标记的样式与button 标记非常不同。使用 button 仍将提交表单，但也允许嵌入 HTML 标记。

【解决方案2】：

如果使用simple_form：

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

【讨论】：

【解决方案3】：

我已经使用 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 \
              }

注意，我在这些示例中使用的是 Simple Form 和 Slim。

【讨论】：

【解决方案4】：

关于使用 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 %>

【讨论】：

【解决方案5】：

我的做法：

<%= submit_tag 'Submit, data: { disable_with: 'Processing...' } %>

【讨论】：