Asset pipeline and jQuery scope

Rails
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

Solved!

6

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

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.