Search code examples
htmljquerydjangodropdown

How can i create a dynamic dropdown form using jquery

i am working on a Django project and i am trying to implement a dropdown form on button click. I have a dropdown form when a button is clicked and each form has its own button, the problem is that when i clicked on a particular form button, all other forms dropdown as well. I want only the particular form to dropdown while the others do not. I think this has to do with passing the id of the form to each button clicked. This is what i tried.

enter image description here

Template:

{% for comment in all_comments %}
<ul>
<li class="float-right">
<!--Dropdown-->
<div class="dropdown dropdown-commentdeleteedit">
<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h grey-text"></i>
</a>
<!-- Menu -->
<div class="dropdown-menu font-small z-depth-1">
<a class="dropdown-item material-tooltip-email editform-dropdown" data-toggle="tooltip" data-placement="top" title="Edit">
<img src="{{ '/static/' }}images/edit24px.png" width="18" height="18"></a>
</div>
</div>
<!--Dropdown-->
</li>
{% endif %}
<h6 class="comment editcomment-text ml-5">
{{ comment.comment_post }}
</h6>

<!-- DROPDOWN EDIT COMMENT FORM -->
<form  method="POST" enctype="multipart/form-data" class="ajaxcomment-editform editcommentform editcomment-form mb-4" id="" action="{% url 'site:comment_update' post.id comment.id %}">
{% csrf_token %}
<textarea name="comment_post" cols="20" rows="5" required="" id="id_comment_post{{ comment.id }}">{{ comment.comment_post }}</textarea>
<button type="submit" class="btn btn-sm waves-effect z-depth-1">Save</button>
</form>
</ul>
{% endfor %}

Jquery:

<script type="text/javascript">
//HIDE AND SHOW COMMENT EDIT FORM ON DROPDOWN
$(document).on('click', '.editform-dropdown', function(){
 $('.editcommentform').show();
 $('.editcomment-text').hide();
})
</script>
Solution

  • It is opening all dropdowns because $('.editcommentform') selects all elements in the DOM with the class editcommentform. The scope is too broad.

    You need to add an event parameter to the handler function, then reference event.target in the function to access the actual object that was clicked. Then you can access the exact .editcommentform and .editcomment-text elements you want to show and hide.

    Something like this should work:

    <script type="text/javascript">
//HIDE AND SHOW COMMENT EDIT FORM ON DROPDOWN
$(document).on('click', '.editform-dropdown', function(event){
  $(event.target).closest('li').find('.editcommentform').show();
  $(event.target).closest('li').find('.editcomment-text').hide();
})
</script>

    Calling $(event.target).closest('li') selects the closest parent li element to the clicked object, then calling find('classname') selects that parent's children with the class editcommentform.

    Here's a fiddle based on your code that shows how it works: https://jsfiddle.net/BenjaminRay/kfbvo6zL/