How can I add rails code to id attribute in div tag?

Question

I would like to do something like this: <div id="<%=service.name%>"

However, I just can't get it to work. I need help! I am trying to create a modal for each button clicked on, but with just on modal div in html.erb.

For the modals to work they would need to be the same ID.

<% @services.each do |service| %>

<div class="card">
<a class="card-b" href="#" data-toggle="modal" data-target="# <%=service.name%> ">
</div>

<div class="modal" id=" <%=service.name%> " tabindex="-1" role="dialog" aria-hidden="true">
Hello this is the modal.
</div>

<% end %>

I would like to use rails code in the ID tag, I don't know if that is possible?

EDIT:

I tried the best answer and it worked only for a few of the modals and the rest didn't. Then I added a modal_tag column to my table and all the modals worked. Thank you!

My code is now id="<%=service.modal_tag%>

Answer 1

My preference is to use a unique value like SecureRandom.hex or __id__ as engineersmnky pointed out, instead of using model ids. Code would look something like this:

# You may also have to require 'securerandom' within your rails app 
# (can't remember if that comes in automatically or not)
<% @services.each do |service| %>
  <!-- Either option for random_id works below -->
  <% random_id = SecureRandom.hex %> 
  <% random_id = service.__id__ %>

  <div class="card">
    <a class="card-b" href="#" data-toggle="modal" data-target="#<%= random_id %>">
  </div>

  <div class="modal" id="<%= random_id %>" tabindex="-1" role="dialog" aria-  hidden="true">
    Hello this is the modal.
  </div>
<% end %>

The reason I prefer this, is it doesn't leak database ids (if that's something you care about) and you're less likely to get id collisions in the event that this modal gets embedded into other pages.

---

And given a simple benchmarking script, it looks like __id__ is the more performant of the two options:

$ cat unique_id.test.rb
require 'securerandom'
require 'benchmark'

n = 100_000
Benchmark.bm do |x|
  x.report { n.times do |n|  ; SecureRandom.hex; end }
  x.report { n.times do |n|  ; n.__id__ ; end }
end

$ ruby unique_id.test.rb
   user     system      total        real
   0.180000   0.000000   0.180000 (  0.176293)
   0.000000   0.000000   0.000000 (  0.005554)

Answer 2

Ruby on Rails has a dom_id method to generate unique ids for the use in HTML documents. Furthermore, I do not like to mix HTML tags and ERB – therefore I would probably work with a helper method

# in a helper
def service_modal(service, &block)
  tag.div(class: 'card') do
    tag.a(class: 'card-b', data: {toggle: 'modal', target: dom_id(service) }, href: '#')
  end +

  tag.div(class: 'modal', dom_id(service), tabindex: 1, role: 'dialog', 'aria-hidden': 'true') do
    capture(&block)
  end
end

and use it like this

# in the view
<% @services.each do |service| %>
  <%= service_modal(service) do %>
    Hello this is the modal.
  <% end %>
<% end %>

Answer 3

Also, You can use object_id .

Rails: data-target="#<%= service.object_id %>">

Benchmark:

   user     system      total        real
0.071505   0.000187   0.071692 (  0.072017) #SecureRandom.hex
0.004685   0.000016   0.004701 (  0.004727) #__id__
0.004500   0.000001   0.004501 (  0.004503) #object_id