Как получить выбранный <div> из цикла из нескольких <divs> в шаблоне Django
Я хочу сделать запись в базу данных с помощью кнопки, для которой у меня есть слушатель событий, который получает данные и делает ajax запрос.
Мой код выглядит следующим образом:
home.html ->
{% for fig in user_figs %}
<div class='card'>
{% if fig.chart %}
<input type="hidden" id="card_chart" value="{{ fig }}">
<input type="hidden" id="card_filter_id" value="{{ fig.filter_id }}">
{{ fig.chart|safe }}
{% endif %}
</div>
{% endfor %}
модель выглядит следующим образом:
class Card(models.Model):
filter_id = models.CharField(max_length=120)
title = models.CharField(max_length=120)
chart = models.TextField()
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
dashboard = models.ForeignKey(Plot, on_delete=models.SET_NULL, null=True)
created = models.DateTimeField(auto_now_add=True)
updated = models.DateTimeField(auto_now=True)
def save(self, *args, **kwargs):
if(len(self.filter_id) == 0):
self.filter_id = str(uuid.uuid1())
super(Card, self).save(*args, **kwargs)
def __str__(self):
return f"Card title: {self.title} Card id: {self.filter_id}"
Слушатель событий в JS выглядит следующим образом:
save_changes_button.addEventListener('click', ()=>{
console.log("SAVE CHANGES BUTTON CLICKED")
const card_id = document.getElementById('card_filter_id').value
console.log(card_id)
const form_data = new FormData()
form_data.append('csrfmiddlewaretoken', csrf_token)
form_data.append('name', name_of_dashbaord)
form_data.append('title', title)
form_data.append('chart', fig)
form_data.append('card_id', card_id)
$.ajax({
type: 'POST',
url: '/card/save/',
data: form_data,
success: function(response){
console.log(response)
},
error: function(error){
console.log(error)
},
processData: false,
contentType: false,
})
})
теперь, когда пользователь нажимает на кнопку, я хочу сделать запись в базе данных, которая выглядит следующим образом:
def create_card_view(request):
if(request.is_ajax()):
name = request.POST.get('name')
card_id = request.POST.get('card_id')
author = Profile.objects.get(user=request.user)
dashboard = Plot.objects.get(name=name)
card = Card.objects.get(filter_id=card_id)
card.dashboard = dashboard
card.save()
return JsonResponse({'msg': f'CARD ADDED TO DASHBOARD {dashboard.name} SUCCESSFUlLY BY {author}'})
return JsonResponse({'msg': 'empty'})
проблема, которую я получаю, заключается в том, что
const card_id = document.getElementById('card_filter_id').value
всегда получает id последнего элемента в списке, так как выполняется цикл, и значение последнего элемента хранится здесь, но я хочу получить id той карточки, на которой была нажата кнопка. Как мне получить card_filter_id карточки, на которой пользователь нажал кнопку 'add to dashboard' (см. изображение фронтенда)
Не добавляйте id внутри цикла, потому что id должен быть уникальным, попробуйте получить id из события click, как это
function myfunc(event){
console.log(`Value : ${event.target.getAttribute('value')}`);
}
<input type="button" onclick="myfunc(event)" value="1">
<input type="button" onclick="myfunc(event)" value="2">
<input type="button" onclick="myfunc(event)" value="3">
<input type="button" onclick="myfunc(event)" value="4">