2

I have the following code: <%= submit_tag t('submit'), class: "btn btn-primary", id: "email_submitbutton", "data-loading-text" => "<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order" %>

The icon tag in data-loading-text is processed as pure text by Rails.

I have tried using data {...} to wrap around it, but no change

Eric Luo
  • 118
  • 2
  • 11

2 Answers2

2

I think what you're looking for is the disable_with option and using a button.

http://apidock.com/rails/ActionView/Helpers/FormTagHelper/submit_tag http://apidock.com/rails/ActionView/Helpers/FormTagHelper/button_tag

The reason for html not working in a submit tags is that they're turned into HTML input tag with the type submit.

<%= submit_tag "<p>Hi</p>" %>

<input type="submit" value="<p>Hi</p>">

Rails 3 Submit Tag + html_safe

<%= button_tag t('submit'), class: "btn btn-primary", id: "email_submitbutton", data: { disable_with: "<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order".html_safe } %>

Also, I highly suggesting using a Font-Awesome gem.

https://github.com/FortAwesome/font-awesome-sass

This is cool because it means you don't need to hand write HTML in you're Ruby code.

Community
  • 1
  • 1
fbelanger
  • 3,522
  • 1
  • 17
  • 32
  • I tried your code, but it still doesn't work. The icon is still treated as text. Your method may only work on button tag not submit_tag. I have found a reference to your method at: https://gorails.com/episodes/button-loading-animations-with-jquery-ujs – Eric Luo May 22 '16 at 18:08
  • You should use a button, as this will also post your form. http://stackoverflow.com/questions/12077748/rails-3-submit-tag-html-safe – fbelanger May 22 '16 at 18:40
1

I found an alternative way to achieve the same effect as Bootstrap's data-loading-text (changing text in button when clicked).

I changed data-loading-text to disable_with and change submit_tag with button_tag:

<%= button_tag t('submit'), class: "btn btn-primary", id: "email_submitbutton", data: {disable_with: "<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order".html_safe} %>

It works as expected

Eric Luo
  • 118
  • 2
  • 11