0

I currently have this setup.

For the HTML:

<%= select_tag "Groups", options_from_collection_for_select(@groups, "id", "name", params[:filter]),
  class: "filter-groups",
  prompt: "All Groups"
%>

For the jquery:

$(document).on('ready page:load', function() {
  $('.filter-groups').on('change', function() {
    window.location.replace('/people?filter='+this.value);
  });
});

So, right now I'm using a class to find the element. But I want to change to use a data attribute instead. Can anyone help me with this? FYI, I don't need the class at all so I'd like to remove that completely for the data attribute.

Bitwise
  • 8,021
  • 22
  • 70
  • 161

1 Answers1

1

In general, using classes to find elements on the page from javascript is a bad practice, so you are right in wanting to change it to a data- attribute. Please use the following:

<%= select_tag "Groups", options_from_collection_for_select(@groups, "id", "name", params[:filter]),
  data: { filter_groups: '' },
  prompt: 'All Groups'
%>

this will generate the following HTML code:

<select name="Groups" id="Groups" class="filter-groups" data-filter-groups="">

and in jquery you can use:

$('[data-filter-groups]').on('change', ...)

Rails will replace automatically the underscore with a dash.

Also read the following if it helps: https://medium.com/@coorasse/how-to-access-your-dom-from-javascript-77faa762c288

coorasse
  • 5,278
  • 1
  • 34
  • 45
  • `In general, using CSS classes to find elements on the page is a bad practice` No it isn't. At all. You're the second person spouting similar nonsense I've seen in the last week. No idea where this idea is coming from, but it's entirely false. – Rory McCrossan Oct 23 '18 at 13:15
  • CSS is meant to be used for styling. Using CSS to add JS behaviour to your DOM elements can have unexpected side-effects if the layout changes. Designer, for example, is not allowed to change CSS classes because there might be JS attached to them, in addition by reading the HTML, you don't see that an element has JS behaviour. I explained this pretty well in the article and I am not just "spouting nonsense". Please elaborate your thoughts and give reasons instead of just saying that is "entirely false" – coorasse Oct 23 '18 at 14:13
  • Ah, that's where your misunderstanding is coming from. Classes != CSS. They are for semantically grouping elements. Those groupings are not just for setting styling rules but also for assigning common functional logic to those elements. This is why making blanket statements such as 'using css classes to find elements on the page is bad practice' is completely wrong, and spreading misleading information, especially on a site such as this. – Rory McCrossan Oct 23 '18 at 14:36
  • I see your point, and I acknowledge the definition of HTML classes. Still, classes are commonly used for style. I had too many bad experiences by assigning JS behaviour to classes and is impossible to distinguish classes used for style to classes used for behaviour. That's why I prefer to adopt a convention where classes are used only for style and data attributes for behaviour and I strongly suggest others to do so. – coorasse Oct 23 '18 at 15:59