CODEWITHSUNDEEP
javascriptruby-on-rails
Mark
Mark

Reputation: 6445

Rails - Javascript - Triggering data behaviour onchange

I have the following buttons that perform as intended and close / open the desired lightbox:

<a data-behaviour="closing-lightbox" href="#edit-class" class="button">Edit Details</a>
<a data-behaviour="closing-lightbox" href="#move-class-year" class="button">Move Class</a>
<a data-behaviour="closing-lightbox" href="#delete-single-class" class="button button--error">Delete Class</a>

I'm trying to get the same behaviour to occur when a dropdown is changed:

<%= f.input_field :file, as: :file, data: {behaviour: 'file-upload closing-lightbox'}, href: '#upload-csv', class: 'file-upload-hide' %>

This doesn't trigger, and neither does assigning the 'closing-lightbox' function to the onchange attribute. Is there any way for me to combine the data-behaviour and the onchange attributes so that it is called on change?

Thanks in advance

EDIT:

I have the following:

$(document).ready(function(){
  $("#csv_file").on("change", function(){
    var box = document.getElementById("upload-csv")
    box.style.display = "block";
  })
});

Is there any way for me to call the data-behaviour method closing-lightbox (is it a method?) inside this function, with the href attribute as well? Thanks in advance again!

Upvotes: 0

Views: 515

Answers (1)

max
max

Reputation: 102036

Data attributes are simply a valid way to attach any arbitrary data to an element.

So no - its not a method. You can attach event handlers to elements with a specific data attribute by using a CSS attribute selector:

$(document).on('click', '*[data-behaviour="closing-lightbox"]', function(){
  console.log('Eureka!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-behaviour="closing-lightbox">Click me</button>

But using classes instead to attach behavior is actually a bit faster (as well as simpler) as it uses document.getElementsByClassName vs document.querySelectorAll.

Upvotes: 1

Related Questions