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


i using jquery display hidden '' element (hidden using css ---> display:none) when button clicked user in table. using rails, ruby, jquery , html.

code view:

     <h2>files</h2> <table class="table"> <tr> <th>filename</th> <th>description</th> <th>download link</th> </tr>       <% @files.each |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) %>              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 hidden 'td' elements containing form_tag in embedded ruby on clicking single button):

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

as seen above, display code in ruby loop , right now, using existing jquery code when click on button, 'td' elements hidden show buttons --- need want display corresponding hidden 'td' element corresponding single button. im not sure how use attributes in html or in jquery this.

can please guide me code this? thanks

you need jquery dom traversal methods this.

this = element clicked, code should :

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

Comments

Popular posts from this blog

html - How to style widget with post count different than without post count -

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

javascript - storing input from prompt in array and displaying the array -