twitter-bootstrap 如何将 data-disable-with 上的 html 设置为 rails submit_tag

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24549067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:03:29  来源:igfitidea点击:

How to set html on data-disable-with to rails submit_tag

htmltwitter-bootstrapruby-on-rails-4erb

提问by Slenny

I have a RoR app using bootstrap. I'm trying to apply the fontawesome html icon tag to a submit_tag helper, but it does not seem to be supported. When I click submit, the disable content just appears as a string instead of being interpreted to html, though it does for link_to helper.

我有一个使用引导程序的 RoR 应用程序。我正在尝试将 fontawesome html 图标标记应用于 submit_tag 帮助程序,但似乎不受支持。当我单击提交时,禁用内容仅显示为字符串,而不是被解释为 html,尽管它对 link_to 帮助程序有效。

Here's the erb:

这是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 %>

Here's what it comes out looking like when I click submit: enter image description here

这是我点击提交时的样子: 在此处输入图片说明

It works with link_to, but then I can't pass the value from the text_field_tag to link_to otherwise, I'd be happy with that solution. I'd really rather avoid writing the .ajax method myself and using javascript to manipulate button values. Any suggestions on how to solve this with the standard FormHelper tags? Many Thanks in advance.

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

回答by lavilet

You should try to change submit_tagto button_tag, something like this:

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

回答by Jeremy Lynch

If using simple_form:

如果使用simple_form

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

回答by Joe

I've been using Rails for almost 10 years and I just stumbled across disable_with... neat!

我已经使用 Rails 将近 10 年了,我只是偶然发现了disable_with......整洁!

You may also use the content_tag helperif you'd rather not insert raw HTML... for example (Simple Form):

content_tag helper如果您不想插入原始 HTML,您也可以使用...例如(简单表单):

= 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 \
              }

Of course its probably cleaner to refactor into a helper...

当然,重构为助手可能更清洁......

# 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 \
              }

Note, I'm using Simple Form and Slim in these examples.

请注意,我在这些示例中使用了 Simple Form 和 Slim。

回答by Ben

A quick tip on generating a button_to with html_safe and disable_with:

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