Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30875

Re: getElementsByClassName only inserts first image into canvas after ruby each loop

Show all headers | View raw

patrick lowry <plowry05@gmail.com> wrote on 16 Jul 2016 in
comp.lang.javascript: 

> On Sunday, July 10, 2016 at 8:21:13 PM UTC-4, Ben Bacarisse wrote:
>> plowry05@gmail.com writes:
>> 
>> > I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I
>> > u 
> se 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 why getElementsByClassName
>  only grabs the first image iterated  
>> >
>> > 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);
>> >  });
>> 
>> Looks like a lot of work (I've seen the correction you've posted).  The
>> normal way to operate on the clicked element is to access it though the
>> event object that is usually passed to the event handler.  But you seem
>> to be using a library (JQuery?) and I don't know anything about its
>> event handling.
>> 

[please skip signatures on usenet]

> 
> Would you mind providing an example of how to do this or an better
> explanation on how you would accomplish this? I have tried may different
> ways using this approach but nothing seems to work. Best
> Pat....appreciate all your help. 
 
I don't understand a word of this non-js-stuff,
and I don't see the anchor or button clicked.

However:

"no matter what [.] I click it always displays the FIRST image"

suggests to me the page with the js-code is reloaded each time, 
as the click-code misses a ";return false;".


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

getElementsByClassName only inserts first image into canvas after ruby each loop plowry05@gmail.com - 2016-07-09 21:07 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop JJ <jj4public@vfemail.net> - 2016-07-10 20:16 +0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop howtovideos3421@gmail.com - 2016-07-10 08:40 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-10 08:44 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-11 01:21 +0100
    Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-15 20:59 -0700
      Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-07-16 09:21 +0200
      Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-16 13:19 +0100
        Re: getElementsByClassName only inserts first image into canvas after ruby each loop Osmo Saarikumpu <osmo@weppipakki.com> - 2016-07-17 07:32 +0300
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 13:42 +0100
            Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-07-17 15:06 +0200
              Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 14:20 +0100
                Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-07-17 16:02 +0200
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 05:56 -0700
        Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 05:51 -0700
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 14:23 +0100
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop Martin Honnen <martin.honnen@gmx.de> - 2016-07-17 15:34 +0200
    Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 18:03 -0700

csiph-web