CODEWITHSUNDEEP
ruby-on-railshtmlruby-on-rails-4erbcustom-data-attribute
maithreya
maithreya

Reputation: 35

Html5 data attributes in div tag ( Rails )

I am using a theme that i bout on themeforest for my rails project where developers used custom data tags to load background image.Code looks like below.

<div class="swiper-slide fit slide-1" data-pages-bg-image="assets/images/banner_1.jpg">

whats the syntax to use data attribute inside div tag? i am using erb as my template engine

Upvotes: 1

Views: 3647

Answers (3)

jamy
jamy

Reputation: 405

try this patterns

1. using plain html tag

<div class="swiper-slide fit slide-1" data-pages-bg-image="assets/images/banner_1.jpg">

2. using content_tag

if your ruby version greater than 2.3

<%= content_tag(:div, "blah blah", 'data-pages-bg-image' => "asets/images/banner_1.jpg", class: "swiper-slide fit slide-1") %>

or not (1.9 etc)

<%= content_tag(:div, 'blah blah', "data-pages-bg-image" => "assets/images/banner_1.jpg" :class => "swiper-slide fit slide-1") %>

example)

<section id="tabs">
  <ul>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "6" } ) %></li>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "5" } ) %></li>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "5" } ) %></li>
  </ul>
</section>

Upvotes: 2

Lakmal N
Lakmal N

Reputation: 1

data is not a property if div.

You can use attr.data with div. [data-pages-bg-image]=

Please check this answer.

Upvotes: -1

Kumar
Kumar

Reputation: 3126

If you want to set data attributes to your div in your erb with some value from your database, you can do it like this.

<div class="swiper-slide fit slide-1" data-pages-bg-image="<%= @item.bg_image %>">
#@item.bg_image is an example, you should put your variable there

Upvotes: 1

Related Questions