Как установить html для data-disable-с помощью rails submit_tag

#html #twitter-bootstrap #ruby-on-rails-4 #erb

#HTML #твиттер-bootstrap #ruby-on-rails-4 #ошибка #twitter-начальная загрузка

Вопрос:

У меня есть приложение RoR, использующее bootstrap. Я пытаюсь применить тег fontawesome html icon к вспомогательному элементу submit_tag, но, похоже, он не поддерживается. Когда я нажимаю отправить, содержимое disable просто отображается в виде строки вместо того, чтобы интерпретироваться в html, хотя для link_to helper это так.

Вот ошибка:

     <%= 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? Заранее большое спасибо.

1. Попробуйте указать это следующим образом <%= submit_tag "Go!", class: "btn btn-transparent", role: "button", data: { disable_with: "<i class='fa fa-spinner fa-spin'></i> Searching...".html_safe} %>

2. Привет, Паван, да, определенно пробовал и это тоже. То же самое… :

3. @Pavan Вы не можете использовать, submit_tag но использование button_tag будет работать.

Ответ №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 %>

1. Спасибо, Лавилет, этот button_tag сделал свое дело, это то, что мне было нужно.

2. Это определенно правильный ответ. 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 … аккуратно!

Вы также можете использовать 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 
              }

Конечно, его, вероятно, проще преобразовать в помощника…

 # 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:

Краткий совет по созданию button_to с html_safe и 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 %>

Ответ №5:

Мой подход:

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