Jquery button click event handler for displaying hidden HTML element in Rails

Question

I am using JQuery to display a hidden '' element (hidden using css ---> display:none) when a button is clicked by a user in a table. I am using Rails, Ruby, JQuery and HTML.

Code for View:

     <h2>Files</h2>
<table class="table">
<tr>
<th>Filename</th>
<th>Description</th>
<th>Download Link</th>
</tr>
      <% @files.each do |file| %>
      <% filename = file.split('/').last %>
      <% object = @bucket.objects[file] %>

    <tr>         
      <td><%= filename %></td>  

      <td>
      <div class="file_description"><%= object.metadata['description']%>    
        <button id     ="file3" type="button"  class= "btn btn-default   
          edit_description"   onclick="Window(this)">Edit</button>                      
     </div>
         <div id = file2 class="file_description_update" >
          <%= form_tag({:action => 'update_file_info'}, multipart: true) do %> 
            Update File Description: <%= text_area_tag :description %>
            <%= hidden_field_tag :s3_path, file %>  
            <%= hidden_field_tag :prefix, @prefix %>
            <%= submit_tag 'Submit' %> </td> <br />
          <% end %>
        </div>


      </td> 

      <td><%= link_to "Download", download_url_for(file) %></td>

    </tr>
  <% end %>
  </table>

Current JQuery code (displays ALL hidden 'td' elements containing the form_tag in embedded ruby on clicking any single button):

    $(document).ready(function(){ 
    $( "button.edit_description" ).on( "click", function( event ) { 
    $( "div.file_description_update" ).show(); 
    }); 
    });

As seen above, My display code is in a ruby for loop and right now, using my existing Jquery code when I click on any button, ALL the 'td' elements that are hidden show up for ALL the buttons --- my need is that I want it to display only the corresponding hidden 'td' element for that corresponding single button. Im not sure how to use attributes in HTML or do something in Jquery for this.

Can someone please guide me with code for this? Thanks

Your answer lies here

Jason P
– Jason P

2013-09-04 01:56:46 +00:00
Commented Sep 4, 2013 at 1:56 — Jason P
– Jason P, Commented Sep 4, 2013 at 1:56

Karl-André Gagnon · Accepted Answer · 2013-09-04 01:59:59Z

1

You need some jQuery DOM traversal methods with this.

this = element you clicked, your code should look like this :

$(document).ready(function(){ 
    $( "button.edit_description" ).on( "click", function( event ) { 
        $(this).closest('td').find( "div.file_description_update" ).show(); 
    }); 
});

answered Sep 4, 2013 at 1:59

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

Collectives™ on Stack Overflow

Jquery button click event handler for displaying hidden HTML element in Rails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related