CODEWITHSUNDEEP
javascriptjqueryhtml
uno
uno

Reputation: 1481

MY show/hide happens to all loop results instead of one clicked

Issue: Show/hide javascript function when clicked opens all do loop results. I need for it to only open the one result the "Edit" is within/clicked for.

The forms textfield is hidden until "Edit" is clicked on. The table can have more than one result so when the table does have 2+ results, the "Edit" button clicked works on all of the loop results instead of just the one it's clicked for.

html:

<div class="form-show"><a href="" id="form-show">Edit</a></div>

<div id="form-hide">
    <!--form and text_field-->
</div>

Javascript:

$(function() {
  $('a#form-show').click(function(event){
    event.preventDefault();
    $('div#form-hide').toggle();
  });
});

The form is a do loop (loops through results).

How can I alter the javascript so when a user clicks "Edit", only the 1 result can be edited instead of all of the results?

Entire form:

<td class="center ">
  <div class="form-show"><%= user.field %>% <a href="" id="form-show">Edit</a></div>
      <div id="form-hide">
          <%= form_for user, remote: true do |f| %>
          <%= f.text_field :field, class: "form-cotrol" %>
          <%= f.button data: {confirm: "Are you sure?"}, class: "btn btn-light " do %>
             <i class="fa fa-pencil" aria-hidden="true"></i>
         <% end %>
      <% end %>
  </div>
</td>

Upvotes: 0

Views: 86

Answers (2)

uno
uno

Reputation: 1481

This isn't neccessarily an answer but if you are reading this and having the same issues.

Please read the comments under the OP by @ Mohamed-Yousef ... his response solved and answered the question but he didn't make a response/answer

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44115

Just use the .next() to find the next occurrence of the editable div:

$(function() {
  $('a#form-show').click(function(event){
    event.preventDefault();
    event.target.next($('div#form-hide')).toggle();
  });
});

Upvotes: 1

Related Questions