Embedding a ruby object into coffeescript

Question

I'm going to try and simplify a previous question: I have a products page at http://pants.telegraphbranding.com/t/women/long-sleeve. When you hover over a product's list of thumbnails the main image should change for that product. But right now, every product on the page is trying to change. To get a unique id of for product I'm using:

<div id="main-image" data-productid="<%= product.id %>">
  <%= link_to large_image(product, :itemprop => "image", :class => "product-image"), product, :itemprop => 'url' %>
</div><!-- main-image-->

How do I incorporate the data-productid="<%= product.id %> into my coffeescript file?

add_image_handlers = ->

thumbnails = ($ '#product-images ul.thumbnails')
($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src')
thumbnails.find('li').eq(0).addClass 'selected'
thumbnails.find('a').on 'click', (event) ->
  ($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href')
  ($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id')
  ($ this).mouseout ->
    thumbnails.find('li').removeClass 'selected'
    ($ event.currentTarget).parent('li').addClass 'selected'
false

thumbnails.find('li').on 'mouseenter', (event) ->
  ($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

thumbnails.find('li').on 'mouseleave', (event) ->
  ($ '#main-image img').attr 'src', ($ '#main-image').data('selectedThumb')

show_variant_images = (variant_id) ->
  ($ 'li.vtmb').hide()
  ($ 'li.vtmb-' + variant_id).show()
  currentThumb = ($ '#' + ($ '#main-image').data('selectedThumbId'))
  if not currentThumb.hasClass('vtmb-' + variant_id)
    thumb = ($ ($ 'ul.thumbnails li:visible.vtmb').eq(0))
    thumb = ($ ($ 'ul.thumbnails li:visible').eq(0)) unless thumb.length > 0
    newImg = thumb.find('a').attr('href')
    ($ 'ul.thumbnails li').removeClass 'selected'
    thumb.addClass 'selected'
    ($ '#main-image img').attr 'src', newImg
    ($ '#main-image').data 'selectedThumb', newImg
    ($ '#main-image').data 'selectedThumbId', thumb.attr('id')

update_variant_price = (variant) ->
  variant_price = variant.data('price')
  ($ '.price.selling').text(variant_price) if variant_price

$ ->
 add_image_handlers()
 show_variant_images ($ '#product-variants input[type="radio"]').eq(0).attr('value') if 
($ '#product-variants input[type="radio"]').length > 0
($ '#product-variants input[type="radio"]').click (event) ->
show_variant_images @value
update_variant_price ($ this)

Obviously I would like the coffeescript to pull out the unique id's of each main image so that the image change only happens for that specific image.

I appreciate it. Sorry for the length.

More or less. I simplified it and reformatted the coffeescript. — reknirt
– reknirt, Commented Mar 14, 2013 at 21:17
Won't You be so kind to replace <div id="main-image" data-productid="12"> with more appropriate <div class="main-image" data-productid="12">? Then You will be able to enumerate all the corresponding images with $(".main-image"), iterate the array and pull out some .data "productid" values. — kirushik
– kirushik, Commented Mar 14, 2013 at 21:23
@kirushik Absolutely. I just changed it. Do you think that's causing any problems? — reknirt
– reknirt, Commented Mar 14, 2013 at 21:26
You can't have duplicate id attributes in HTML, all bets are off if you attempt to treat looks-like-HTML-but-is-not-valid-HTML as HTML. — mu is too short
– mu is too short, Commented Mar 14, 2013 at 21:27

kirushik · Accepted Answer · 2013-03-14 21:49:44Z

1

At first, one should enumerate all the elements with data-productid properties.

For this very page var elements = $(".main-image") should be enough. (Please keep in mind the class selector here. Original page contained id selectors, and caused roubles and havoc. Fixed for now.)

Then one should iterate over achieved values: $.each(elements, function(index, element){...}) should do the trick.

And at last it is possible to retrieve data-productid values from elements (in $.each loop, I mean): $(element).data("productid") will return required values. (Please note $(element) part here. element.data(...) won't work because we enumerated jQuery accessors, not actual elements — and they need to be dereferenced before use.)

Combine that into something like $.each($(".main-image"), function(index,elem){console.log($(elem).data("productid"))}) (tested in Chrome DevTools against actual page, seemed to work) — voilà, problem solved!

answered Mar 14, 2013 at 21:49

kirushik

1,3141 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

reknirt Over a year ago

I got my coffeescript loop working, it's pulling out all the productids. Thank you very much for your help. How would you attach that to the above coffeescript file so that it runs that cs on each productid?

kirushik Over a year ago

@jtrinker I don't get what do You mean with 'cs', sorry. Perharps You just should substitute console.log with required operational function.

reknirt Over a year ago

I just meant the primary coffeescript file. How do I apply each of the data elements in the array created with $.each($(".main-image"), function(index,elem {console.log($(elem).data("productid"))}) to be run separately in the coffeescript file I posted in my initial question?

kirushik Over a year ago

Sorry, I still don't get it. You run console.log on each of your productid's one by one. What stops YOu from replacing that call with another function?

reknirt Over a year ago

I apologize for the questions, feel free to move on. I tried adding $.each $(".main-image"), (index, elem) -> to the very top of the coffeescript file, above add_image_handlers = -> And then $(elem).data("productid") in various places, such as directly above the show_variant_images = (variant_id) -> function, as well as a couple other places, but it just kills the hover effect on the page, doesn't fix anything.

|

Collectives™ on Stack Overflow

Embedding a ruby object into coffeescript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related