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

问题:

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.

Here's the 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:

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.

回答1:

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

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

回答2:

If using simple_form:

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

回答3:

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

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

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

回答4:

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

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