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

前端 未结 4 1072
独厮守ぢ
独厮守ぢ 2021-02-04 00:15

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 disa

相关标签:
4条回答
  • 2021-02-04 00:46

    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 %>
    
    0 讨论(0)
  • 2021-02-04 00:48

    If using simple_form:

    <%= f.button :button, 
                 'Save', 
                 class: 'my-class', 
                 data: { 
                   disable_with: '<i class="fa fa-spinner fa-spin"></i>'
                 } %>
    
    0 讨论(0)
  • 2021-02-04 00:55

    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 %>    
    
    0 讨论(0)
  • 2021-02-04 01:03

    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.

    0 讨论(0)
提交回复
热议问题