How to add HTML custom data- attributes to a rails form label tag?

Question

I have a rails form that has this code:

<%= form_tag("../vehicles", method: "get") do %>
  <div>
    <div>
      <%= label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') %>
    </div>
    <div>
      <%= label_tag(:address, t("ui.reservations.between_now_and_param", param: @start_date.strftime(    time_format))) %>
    </div>
    <div>

I want to add a HTML data attribute to the first label, so I tried:

<%= label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') %>

but I get a syntax error:

SyntaxError in Reservations#new

.../_form.html.erb:8: syntax error, unexpected tLABEL

');@output_buffer.append= ( label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') );@output_buffer.safe_concat('...

I can add it as

    <%= label_tag(:address, t("ui.reservations.pickup"), data: 'here') %>

That generates:

<label for="address" data="here">

but I don't seem to be able to add data-something attributes. I get a syntax error.

How can I do this?

Sarsenet

Answer 1

The answer provided by @vee will render this correctly. The reason you are getting a syntax error is because data-addr: 'here' is not valid ruby code. That is, you can't have use the JSON hash notation with a key containing a hyphen character. You can modify it to work properly like this:

<%= label_tag(:address, t('ui.reservations.pickup'), 'data-addr' => 'here' %>

But the recommended approach is to declare a nested hash for 'data' attributes:

<%= label_tag(:address, t('ui.reservations.pickup'), :data => {:addr => 'here'} %>

Or simply (as @vee suggested):

<%= label_tag(:address, t('ui.reservations.pickup'), data: {addr: 'here'} %>

Underscores also generate dashes. For example:

<%= label_tag(:address, t('ui.reservations.pickup'), data: {from_base: 'here'} %>

generates

<label for="address" data-from-base="here">
    pickup:
</label>

Magdau

Answer 2

Use data hash as follows:

<%= label_tag(:address, t("ui.reservations.pickup"), data: {addr: 'here'}) %>
# => <label data-addr="here" for="address">...</label>

Elaina