AJAX обновляет только один экземпляр модели django
У меня есть проект django, который показывает список объектов "issue", и каждый объект issue имеет булево поле под названием "fixed". Я хочу, чтобы пользователь мог нажать кнопку, которая изменит "fixed" с помощью ajax, но кнопка изменит только один из объектов issue, а не тот "issue", к которому принадлежит эта кнопка. проблема
Вот мой html:
{% for issue in projects.issues.all %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ issue.author.profile.image.url }}">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2">{{ issue.author }}</a>
<small class="text-muted">{{ issue.date_posted|date:"F d, Y" }}</small>
</div>
<h2><a class="article-title" href="{% url 'issue-detail' issue.id %}">{{ issue.title }}</a></h2>
<p class="article-content">{{ issue.description }}</p>
<p>{{ issue.severity }}</p>
{% if projects.author == user %}
<span id="fixed_bool">{{ issue.fixed }}</span>
{% csrf_token %}
<button class = "btn btn-primary btn-sm" id="fix-button" value = "{{ issue.id }}">Fix</button>
{% endif %}
</div>
</article>
{% endfor %}
Javascript:
$(document).on('click', '#fix-button', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url "fix_issue" %}',
data: {
issueid: $('#fix-button').val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
action: 'post'
},
success: function (json) {
document.getElementById("fixed_bool").innerHTML = json['result']
console.log(json)
},
error: function (xhr, errmsg, err) {
}
});
})
my url
path('fix/', views.FixView, name='fix_issue'),
и мои взгляды
def FixView(request):
if request.POST.get('action') == 'post':
result = ''
id = int(request.POST.get('issueid'))
issue = get_object_or_404(Issue, id=id)
if issue.fixed == False:
issue.fixed = True
result = str(issue.fixed)
issue.save()
else:
issue.fixed = False
result = str(issue.fixed)
issue.save()
return JsonResponse({'result': result, })
Любая помощь будет высоко оценена. Спасибо!!!
Атрибут id
в HTML должен быть уникальным.
Но у каждой кнопки один и тот же id: id="fix-button"
.
Поэтому в вашем JS-коде this-$('#fix-button').val()
- возвращает всегда значение первой кнопки.
Чтобы исправить это, либо создайте уникальные идентификаторы для каждой кнопки, либо используйте классы:
<button class="fix-button">...</button>
В коде JS выберите кнопки по имени класса:
$(document).on('click', '.fix-button', function (e) {
...
issueid: $(this).val(),
}