Adding html data attribute to simple_forms input
I'm attempting to implement a javascript plugin that requires me to add the data attribute: data-region-id
to a select input. I've attempted to do so as follows (the input that you'd be looking for is :country
, third from the bottom):
<div id="capdiv">
<h1>People#edit</h1>
<p>Find me in app/views/people/edit.html.erb</p>
<%= simple_form_for @person, url: url_for(action:'update', controller:'people'), update: { success: "response", failure: "error"} do |f| %>
<div class="clearfix entity-add nested-fields person">
<div class="dynamic-container">
<div class="symegrid">
<div class="form-inline">
<%= f.input :fname, input_html: {class: 'fname form-input form-control fifty'}, label: "First Name" %>
<%= f.input :lname, input_html: {class: 'lname form-input form-control fifty'}, label: "Last Name" %>
</div>
<div class="form-inline">
<%= f.input :email, as: :email, input_html: {class: 'email form-input form-control'}, label: "Email" %>
<%= f.input :telephone, input_html: {class: 'telephone form-input form-control'}, label: "Telephone" %>
</div>
<div class="form-inline">
<%= f.input :street, input_html: {class: 'street form-input form-control'}, label: "Street" %>
<%= f.input :city, input_html: {class: 'city form-input form-control'}, label: "City" %>
</div>
<div class="form-inline"><%= f.input :country, as: :select, input_html: {data-region-id: "person_state", class: 'country form_control crs-country'}, label: "Country" %></div>
<div class="form-inline">
<%= f.input :state, as: :select, input_html: { id: "person_state", class: 'state form-control' }, label: "State/Province" %>
<%= f.input :zip, input_html: {class: 'zip form-input form-control'}, label: "Zip" %>
</div>
</div>
</div>
</div>
<% end %>
</div>
However, when I attempt to load the page, I get the following error message:
SyntaxError (/home/sam/Dropbox/railsproject/legal/app/views/people/edit.html.erb:20: syntax error, unexpected tLABEL
...t, input_html: {data-region-id: "person_state", class: 'coun...
... ^
/home/sam/Dropbox/railsproject/legal/app/views/people/edit.html.erb:20: syntax error, unexpected ',', expecting ')'
...data-region-id: "person_state", class: 'country form_control...
... ^
/home/sam/Dropbox/railsproject/legal/app/views/people/edit.html.erb:20: syntax error, unexpected '}', expecting ')'
...ntry form_control crs-country'}, label: "Country" );@output_...
... ^):
app/views/people/edit.html.erb:20: syntax error, unexpected tLABEL
app/views/people/edit.html.erb:20: syntax error, unexpected ',', expecting ')'
app/views/people/edit.html.erb:20: syntax error, unexpected '}', expecting ')'
How should I add this attribute? I was thinking that, worst case scenario, I could force it with some javascript once the page loads but that seems unnecessary.
Thanks in advance.
Answer
The problem is you cannot declare data-region-id
as a symbol in Ruby, the dashes are invalid characters. You can symbolize a string, like this:
"data-region-id" => "person_state"
I believe "the Rails way" of creating a custom data attribute is to nest it, like this:
data: {region_id: "person_state" }
# Rails will convert the underscores to dashes
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM