Undefined value of $(this).data(value) with jQuery click() method

Question

Im my Rails 5 app, I am building a dynamic menu to route users to a particular part of the site based on their location. When they click on a menu item from the home page a modal is show for them to choose one of four locations we deliver to. A function with the click method then should grab the data- attribute and insert it into the url path to redirect them. I cannot seem to get the data attribute to pass through even if hard coded - I just get an undefined in the console.

I am not including the modal code here because it is not the issue; it opens and inserts /undefined/undefined/ in the path just like the console. My issue is only in getting this data value.

_sidebar.html.erb

<div id="ss_menu">
  <% @cat.each do |c| %>
    <div class="ss_button"><%= c.name %></div>
    <div class="ss_content">
      <ul>
        <% c.subcategories.each do |s| %>
          <li>
            <a href="#" 
               data-id="<%= s.id %>" 
               data-category="<%= c.slug %>" 
               data-subcategory="<%= s.slug %>" 
               data-toggle="modal" 
               data-target=".mlc-modal"><%= s.name %></a>
          </li>
        <% end %>
      </ul>
    </div>
  <% end %>
</div>

script

<script type="text/javascript" charset="utf-8">
    $(document).on("click", ".ss_button", function () {
        var id = $(this).data('id');
        var category = $(id).data('category');
        var subcategory = $(id).data('subcategory');
        console.log(id);
        console.log(category);
        console.log(subcategory);
        $('.modal-content a').attr('href', function () {
            return this.href + category + '/' + subcategory;
        });
    });
</script>

`var id = $(this).data('id');` will always undefined as `ss_button` element have no `data-id` attribute — Alive to die - Anant, Dec 31 '17 at 07:48
A dumb mistake on my part... please create an answer for me to accept. Thank you. — Charles Smith, Dec 31 '17 at 07:57

score 1 · Answer 1 · answered Dec 31 '17 at 07:57

1

ss_button element on itself doesn't have any data properties. So, this in that function which refers to <div class="ss_button">, points to an element that doesn't have any data properties. That's why $(this).data('id') returns undefined.

answered Dec 31 '17 at 07:57

frogatto

28,539
11
83
129

score 0 · Accepted Answer · answered Dec 31 '17 at 07:59

0

var id = $(this).data('id');

Here $(this) refers to <div class="ss_button"> which have no data-id attribute.

So it will always comes(outputs) as undefined.

answered Dec 31 '17 at 07:59

Alive to die - Anant

70,531
10
51
98

Undefined value of $(this).data(value) with jQuery click() method

2 Answers2

Linked