Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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 disable content just appears as a string instead of being interpreted to html, though it does for link_to helper.

Here's the 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 %> 

Here's what it comes out looking like when I click submit: enter image description here

It works with link_to, but then I can't pass the value from the text_field_tag to link_to otherwise, I'd be happy with that solution. I'd really rather avoid writing the .ajax method myself and using javascript to manipulate button values. Any suggestions on how to solve this with the standard FormHelper tags? Many Thanks in advance.

like image 394
Slenny Avatar asked Jul 03 '14 08:07

Slenny


People also ask

What is the use of disabled in HTML?

Definition and Usage. The disabled attribute is a boolean attribute. When present, it specifies that the element should be disabled. A disabled element is unusable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.).

What happens when an element is disabled in JavaScript?

A disabled element is unusable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable again.

How to keep Rails-UJS behavior consistent with all other browsers?

Sign in to your account Firefox has a weird behavior where when you hit the back button it keeps the submit buttons and links on disabled state which even reloading the page do not re-enables them. Using the pageshow event, which is triggered every time a page loads, we can keep the rails-ujs behavior consistent with all other browsers.


2 Answers

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 %>     
like image 89
lavilet Avatar answered Sep 27 '22 19:09

lavilet


If using simple_form:

<%= f.button :button,               'Save',               class: 'my-class',               data: {                 disable_with: '<i class="fa fa-spinner fa-spin"></i>'              } %> 
like image 20
Jeremy Lynch Avatar answered Sep 27 '22 19:09

Jeremy Lynch