0

My issue is that my image-picker.js doesn't trigger the onchange when selected by clicking the image. https://rvera.github.io/image-picker/

Although, when actually selecting from the dropdown, it does trigger the onchange.

I have the following:

<%= ff.select :image_file_id, options_for_select(@image_files.map { |image| [image.id, {'data-img-src'=>image.image_file_url(:thumb)}]}), {:include_blank => 'Choose None'}, class: "image-picker", id: "tshirt-design" %>

<script>

var images = <%= images_2.to_h.to_json.html_safe %> // this is an array from ruby
document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
   updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
}, false);

//image-picker
var imgSetting<%= "#{ff.object.print_location.id}" %> = {
  hide_select: false,
  show_label: true,
};
$(document).ready(function () {
  $(".image-picker-<%= "#{ff.object.print_location.id}" %>").imagepicker(imgSetting<%= "#{ff.object.print_location.id}" %>);
});

</script>

Image picker produces this (this is a visual and when the thumnail is selected, is changes the select field in the select dropdown):

<ul class="thumbnails image_picker_selector">
  <li>
    <div class="thumbnail selected">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>
  <li>
    <div class="thumbnail">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>
  <li>
    <div class="thumbnail">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>
  ....
</ul>

This is under the select field basically shows the images available for select and when you select them, it changes the select field. Thin on form submit, it does everything correctly as if selected in the drropdown. The issue is that its not triggering the actual select is changes when clicked on the thumbnails. I would like to same change efect trigger to happen when selecting an image from the dropdown and when clicking the thumbnail that changes the select field.

I tried this:

document.getElementsByClassName("thumbnail").addEventListener("select", clickImage);

function clickImage() {
  document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
  updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
  }, false);
};

and this:

document.getElementsByClassName("thumbnail").addEventListener("change", clickImage);

function clickImage() {
  document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
  updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
  }, false);
 };

Error:

Event listener is not a function

I've tried a other ways but are not notable.

How can I achieve allowing a trigger when the image is chosen to do the same function as when the image is chosen from the select dropdown?

I need the same event that happens when:

document.getElementById("tshirt-design-<%= "#{ff.obje...

To happen with:

 <li>
    <div class="thumbnail">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>
uno
  • 1,421
  • 12
  • 38

1 Answers1

0

With document.getElementsByClassName("thumbnail") you get an Array of HTMLCollection elements that contain all html elements who match with your search you need to iterate on each of them for use each addEventListener of the childs of this array.

Example:

[].forEach.call( document.getElementsByClassName("thumbnail"), function( element ){
    element.addEventListener("change", clickImage);
} );
lp177
  • 83
  • 1
  • 6