Asset pipeline and jQuery scope

rubyonrails-talk
1

Hi, I'm an amateur learning Rails, and having trouble understanding how to include different jQuery selectors in the same scope since Rails 3.

eg How do I include $('#big_image'), which is on the same page as $('#little_image'), in the scope of of the following?

questions.js.coffee:   $('#little_image').click ->     if little_image.style.display == "block" # Hide little image/show big image       $('#little_image').hide()       $('#big_image').show()

ERROR: Uncaught ReferenceError: big_image_div is not defined

I get why big_image_div is not in the scope of $('#little_image'), but could use some guidance as to how to go about making this work.

Thanks

2

Your coffeeScript looks fine, I don't think that error is in reference to that as your coffee references '#big_image' and not 'big_image_div' what is 'big_image_div'?

3

also, could you create gist with your code? gist.github.com

Matt

4

Sorry, should be:

questions.js.coffee:   $('#little_image').click ->     if little_image.style.display == "block" # Hide little image/show big image       $('#little_image').hide()       $('#big_image_div').show()       $('#big_image').show()

Both $('#big_image_div') and $('#big_image') cause the error. $('#big_image_div') just throws the first error.

I assume $('#little_image') is in the scope as it is called in the .click. The big_image and big_image_div are id's on the same page but I don't know how to tell jQuery that...

5

Posted by buyzlots (Guest) on 2013-05-08 21:31

also, could you create gist with your code? gist.github.com

Matt

Sorry, don't know how to do that :frowning:

Can anyone point me in the right direction for how you include a selector id in the scope of a coffeescript .click (see above)

Thanks

6

Solved!

7

good to hear! Curious what was the issue?

Matt

8

buyzlots wrote in post #1108466:

good to hear! Curious what was the issue?

Matt

if $('#alreadyAnswered').length > 0     $('#big_image').hide()     $('#big_image_div').hide()

  $('#little_image').click ->     $('#little_image').hide()     $('#little_image_div').hide()     $('#big_image_div').show()     $('#big_image').fadeIn('medium')

  $('#big_image').click ->     $('#big_image').hide()     $('#big_image_div').hide()     $('#little_image_div').show()     $('#little_image').fadeIn('medium')

Not sure why the other did not work, but this did the trick.