jQuery ajax response to html issue

Question

For my project I have created a profile page that lists profile pictures uploaded by users. Under each picture I have a "View comments" link that upon clicking shows all the comments linked to that picture object. Using an AJAX call I search the record based on the image object id and fetch the related comments.

The issue is that when I am rendering that response to HTML, clicking the view comments of one image opens all the other view comments section for other images and populates the same data to all other sections.

<div class="show">
  <a href="">
    <h6 data-id="{{item.pk}}">View Comments</h6>
  </a>
  <div id="refresh" class="menu" style="display: none;"></div>
</div>

$(document).ready(function() {
  var iden, array, array2;

  function getdata(iden) {
    var val = iden.data('id');
    console.log(val)

    $.ajax({
      url: "{% url 'fetchertwo' %}",
      type: "GET",
      data: {
        'search': val
      },
      dataType: 'json',
      success: function(data) {
        array = data.content;
        array2 = data.author;
        console.log(array);
        console.log(array2);

        $('.show').find('.menu').toggle("slide");
        $.each(array, function(i, item) {
          $('.menu').append(array[i] + array2[i] + '<br>')
          console.log(array[i], array2[i]);
        });
      }
    });
  }

  $('.show').on('click', function(event) {
    iden = $(event.target)

    console.log(iden)
    getdata(iden);
    event.preventDefault();
    $('.menu').html("")
  });

  $('#formtwo').on("submit", function(event) {
    event.preventDefault();
    if (!iden) {
      iden = $(this).find('.form-control').data('id');
    }
    var formData = $(this).serialize();
    var posting = $.post("/usercreation/picomment/" + iden, formData, function(response) {
      getdata(iden);
    });
    this.reset();
  });
});

Rory McCrossan · Accepted Answer · 2019-05-09 09:41:18Z

1

The issue is because you're selecting and updating all the .menu elements in the DOM. You instead need to retrieve the one which is contained within the clicked .show element, which you can achieve using find() and the iden reference you pass to the getdata() function. Try this:

iden.find('.menu').append(array[i] + array2[i] + '<br>')

answered May 9, 2019 at 9:41

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery ajax response to html issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related