Adding html data attribute to simple_forms input

Question

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.

femmestem · Accepted Answer · 2015-12-17 01:34:37Z

6

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

answered Dec 17, 2015 at 1:34

femmestem

6313 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CTS_AE Over a year ago

This whole time I wasn't putting the data inside of input_html, so many articles made it look like data could be a top-level attribute (surely other helpers, but the inheritance and magic is crazy!). Anyone else in my boat, this is what it needs to look like: <=% f.input :fname, label: 'First Name', input_html: { data: { action: 'controller-name#methodName' } } %> . This was to get a checkbox working with Stimulus JS /phew.

Collectives™ on Stack Overflow

Adding html data attribute to simple_forms input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related