在 Rails submit_tag 的数据加载文本中添加图标

Question

我有以下代码： <%= 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" %>

data-loading-text 中的图标标签被 Rails 处理为纯文本。

我尝试使用data {...} 包裹它，但没有任何变化

Answer 1

我认为您正在寻找的是 disable_with 选项并使用按钮。

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

html 在提交标签中不起作用的原因是它们被转换为类型为提交的 HTML 输入标签。

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

另外，我强烈建议使用 Font-Awesome gem。

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

这很酷，因为这意味着您无需在 Ruby 代码中手写 HTML。

Answer 2

我找到了一种替代方法来实现与 Bootstrap 的 data-loading-text 相同的效果（单击时更改按钮中的文本）。

我将data-loading-text 更改为disable_with 并将submit_tag 更改为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} %>

按预期工作