CODEWITHSUNDEEP
htmlruby-on-railsjqueryerb
orange88
orange88

Reputation: 81

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

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

Upvotes: 0

Views: 1728

Answers (1)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

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(); 
    }); 
});

Upvotes: 1

Related Questions