Отправка элементов из заполненных данных forloop в шаблоне django через ajax в представление django

Question

Я пытался создать клик и заполнить div с помощью ajax в моем приложении электронной коммерции django. Проект работает таким образом, что, когда клиент нажимает на категорию на странице мужчин, он заполняет еще один div

gender.html

{%for cate in cat%}
            <a href="javascript:getcat()" id="catgend" cats-data="{{cate.catname}}" gen-data="{{gens.gender}}" data-sort-url="{% url 'Home:sortcat' cpk=cate.pk %}" >{{cate.catname}}</a>
          {% endfor %}
          <div id="products">
            <div class="progress">
                <img src="{% static 'img/load.gif'%}">
            </div>
          </div>

---

Это отправляет данные в мое представление django через функцию ajax, называемую getcat, но отправляемые данные - это данные первого элемента в цикле, соответствующего элементу цикла, по которому щелкнули. ниже моя функция ajax:

getcat ()

function getcat() {
	  $(".progress").show()
      var cat = $("#catgend").attr("cats-data");  
      var gender= $("#catgend").attr("gen-data");
      var url = $("#catgend").attr("data-sort-url");  
      $.ajax({                       
        url: url,                    
        data: {
          'cat': cat,
          'gender':gender,     
        },
        success: function (data) {   
          $("#products").html(data);  
        }
      });
      $(".progress").hide()
  

  }

enter code here

Из моего исследования я обнаружил, что они имеют одинаковый идентификатор. Как решить проблему динамического изменения идентификатора по одному и тому же циклу. Спасибо

Answer 1

Замените атрибут id атрибутом class, поскольку у вас не должно быть более одного элемента с таким же id. Также мы можем изменить cats-data и gen-data на действительные data-* атрибуты.

{% for cate in cat %}
  <a href="#" class="catgend" data-cats="{{cate.catname}}" data-gen="{{gens.gender}}" data-sort-url="{% url 'Home:sortcat' cpk=cate.pk %}" >{{cate.catname}}</a>
{% endfor %}

Привязать событие щелчка к якорям, используя новое имя класса.

$('.catgend').on('click', function (e) {
    $('.progress').show()
    var data = $(this).data()
    $.ajax({                       
        url: data.sortUrl,                    
        data: {
            'cat': data.cats,
            'gender': data.gen,     
        },
        success: function (data) {   
            $('#products').html(data);  
        }
    });
    $('.progress').hide()
});

Использование атрибутов данных для простого накопления значений данных.