AJAX only picks first element id in a DJANGO loop.

Wherever I click the "edit" button it brings the first post content. I've just similar metholodogy in other functions (for example a like button) but in this one I don't really see what it only picks the top element of the loop in every template. Please help.

This is what I came up with so far:

jS:

    //Edit

$('.editfunction').click(function(){
        event.preventDefault()
        var post_pk;
        var content = $('.textarea_edit').val();
        post_pk = $(this).data("post_pk");

        $.ajax({
        type: "POST",
        url: `/post/${post_pk}/edit`,
        data: {
            csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
            post_id: post_pk,
            textarea: content
        },
        success: function(data) {
            $('.modal-edit').modal('hide')
            var content = $('.textarea_edit').val()
            $(`.post-object-content${post_pk}`).html(content)
        }
        })
    })

FOR loop:

    {% for post in paginated_posts %}
<div style="padding: 10px;" id="{{post.id}}">
    <div style="padding: 10px; border: 1px solid;">
    <p>
    <h4><a href="{% url 'post_view' post.pk %}">{{ post.title }}</a></h4>
</p>
    <p style="display: inline-flex;">
      {% if post.author.profile.id %}
    by: <span style="font-weight: bold;"><a href="{% url 'profile_class' post.author.profile.id %}">&nbsp; {{ post.author }} &nbsp;</a></span>
    {% else %}
    by: <span style="font-weight: bold;">&nbsp; {{ post.author }} &nbsp;</span>    
    {% endif %}
    on {{ post.creation_date }}
    </p>
    <h5 >{{ post.post_text }}</h5>
    
<!-- Edit -->
{% if user.is_authenticated %}
{% if user.id == post.author.id %}

<!-- Button modal edit-->
<small><a href="{% url 'post_view' post.pk %}">[Edit]</a></small>

<!-- Modal EDIT -->
<div  id="edit" role="dialog">
  <div  role="document">
    <div >
      <div >
        <h5 >Edit post {{ post.id }}</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
          <form method=post action="{% url 'edit' post.pk %}">
              {% csrf_token %}
              <textarea rows="10"  name="textarea">{{post.post_text}}</textarea>
              <br>
              <div >
                  <button  data-post_pk="{{ post.pk }}" type="submit" value="Save">Submit</button>
              </div>
          </form>
      </div>
    </div>
  </div>
</div>

{% endfor %}

CodePudding user response：

Your problem lies here:

var content = $('.textarea_edit').val();

This is working as intended, unfortunately. If there are multiple members of the class selector, .val() will grab the first element of the list of classes by that name (see https://api.jquery.com/val/ for details)

if you are wanting to do something with each of that class's textarea values, you can put them into an array by a process like:

var content = []

$('.textarea_edit').each(function(){
    content.push($(this).val()); 
});