accessing a variable from an each loop

Hi

If you look at the attached file you will see the jQuery is inside the each loop, result, it toggles all comments when any hide is clicked.

I want to move the jQuery outside the loop but if I do it throws an error saying 'undefined local variable or method `comment' '

Is there any way I can pass the comment variable from the loop to the jQuery.

If I'm going about this the wrong way please let me know.

Neil

PS

This is an extension to this thread

but I am reposting because the title no longer bears any relation to the problem I have now.

Attachments: http://www.ruby-forum.com/attachment/6512/_subcomment.html.erb

Neil Bye wrote in post #1015384:

Hi

If you look at the attached file you will see the jQuery is inside the each loop, result, it toggles all comments when any hide is clicked.

I want to move the jQuery outside the loop but if I do it throws an error saying 'undefined local variable or method `comment' '

Is there any way I can pass the comment variable from the loop to the jQuery.

No. comment is a local variable and ceases to exist outside the block.

If I'm going about this the wrong way please let me know.

Reverse engineering from your results, this line:

$("button").click(function () {           $("<%= "#subcomNormal_#{comment[:id]}" %>").toggle();});

retrieves all the buttons currently on the page, and adds the current version of the click-function to all the buttons. What you want to do is add the current version of the click-function to only one button. How do you identify that button? How about adding the comment id to the <button> tag:

<button id=<%= comment.id %> >

and then saying:

$(button#<%= comment.id %>).click(....)

You also have to realize that javascript executes in a browser, and ruby/rails executes on the server. What that means is that when this appears in a .html.erb file:

$("button").click(function () {           $("<%= "#subcomNormal_#{comment[:id]}" %>").toggle();});

rails will do the string interpolations #{..} and the <%= %> substitutions to give you something like:

$("button").click(function () {           $("#subcomNormal_3").toggle();});

But that code executes in the browser. And $("button") finds ALL the buttons on the page. Writing this:

<% @user.comments.each do |comment| %>

  <button>Hide</button>

  $("button").click(function () {....

<% end %>

...does not limit the 'button' selector to that <button> tag.

Neil Bye wrote in post #1015384:

> If I'm going about this the wrong way please let me know.

Reverse engineering from your results, this line:

$("button").click(function () { $("<%= "#subcomNormal_#{comment[:id]}" %>").toggle();});

retrieves all the buttons currently on the page, and adds the current version of the click-function to all the buttons. What you want to do is add the current version of the click-function to only one button.

A more jqueryish way of doing things would be to attach the same click handler to all buttons, but have that handler find the correct element to hide, for example if those elements all had class subcomment_container you might write something along the lines of

$('button').click(function(){$ (this).siblings('.subcomment_container').toggle()})

Fred