1. Forum
  2. Usenet
  3. COMP.LANG.RUBY

  • Ruby each loop only grabs first image when using getElementsbyClassName

    From patrick lowry@21:1/5 to All on Sat Jul 9 21:13:00 2016
    I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I use CarrierWave to assist on storing my images in the database and I use Ruby's .each iterator to display the images on the page(see below). It works great.

    <canvas id="canvas" width="300" height="550"></canvas>
    <% @images.each do |m| %>
    <%= image_tag m.photo_pic.url, :class => "my-image", %>
    <% end %>

    I then use a javascript function and fabric.js to display the images in my canvas.(see below) It works, However no matter what image I click it always displays the FIRST image into the canvas.For Example, if I click the 10th image that is displayed the
    first image will always be added to the canvas. I would like to click any image and have that particular image display in the canvas. Im not sure what the problem is.

    var canvas = new fabric.Canvas('canvas');
    $(".my-image").on('click',function() {
    var imgElement = document.getElementsByClassName("my-image")
    var imgInstance = new fabric.Image(imgElement, {
    left: 50,
    top: 50,
    });
    canvas.add(imgInstance);
    });

    I think this could help out alot of people who are using Ruby and Fabric.js in there apps.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Sayth Renshaw@21:1/5 to All on Mon Jul 11 18:32:53 2016
    Sorry but I can only see @images in the each, and everywhere else it's referenced as my-image.

    Sayth

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From patrick lowry@21:1/5 to Sayth Renshaw on Sun Jul 17 06:07:58 2016
    On Monday, July 11, 2016 at 9:33:04 PM UTC-4, Sayth Renshaw wrote:
    Sorry but I can only see @images in the each, and everywhere else it's referenced as my-image.

    Sayth

    Thanks for the reply, sorry if it was confusing. I can't figure out why my Jquery code doesn't grab the image selected and places it in the canvas.

    if i put [4] at the end of var imgElement (as seen below) The 4th image from the data base will display and that all makes sense of course. But I don't know how to display the image the user specifically selected.

    var imgElement = document.getElementsByClassName("my-image")[4]

    Any ideas?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)