formtag - Cómo configurar html en data-disable-with para rails submit_tag

form_tag helper rails

Question

Tengo una aplicación RoR usando bootstrap. Estoy tratando de aplicar la etiqueta del icono html de fontawesome a un ayudante submit_tag, pero parece que no es compatible. Cuando hago clic en enviar, el contenido deshabilitado solo aparece como una cadena en lugar de ser interpretado a html, aunque lo hace para link_to helper.

Aquí está el 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 %>

Así es como se ve cuando hago clic en enviar:

Funciona con link_to, pero luego no puedo pasar el valor de text_field_tag ​​a link_to, de lo contrario, estaría contento con esa solución. Realmente prefiero evitar escribir yo mismo el método .ajax y usar javascript para manipular los valores de los botones. ¿Alguna sugerencia sobre cómo resolver esto con las etiquetas estándar de FormHelper? Muchas gracias de antemano.

Answer 1

Debes intentar cambiar submit_tag por button_tag , algo como esto:

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

Answer 2

Si usa simple_form :

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

Answer 3

Un consejo rápido para generar un button_to con html_safe y 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 %>