I have a serious problem with checkboxes. I’m creating a ToDo style application and I want it to save the changes (item_done = False or True) when the checkbox is clicked.
I have implemented a JS script to make everything come out “smoothly”, I am using jQuery.
Unfortunately the following error appears:
when clicking on the first item in the list, everything works smoothly but when clicking on the second, the change happens in the first and vice versa when clicking on the first the change happens in the second.
I can’t to figure out what I am doing wrong.
I have included the code below.
HTML with Django, list of items in task:
<div class="card-header bg-transparent" ><h3>To-do list</h3></div>
<div class="text-start">
<br/>
<ul class="list-group">
{% if list_items %}
{% for item in list_items %}
{% if item.item_done %}
<li class="list-group-item">
<input class="form-check-input" type="checkbox" checked="checked" value="{{ item.id }}" id="un-check-box">
{{ item.title }}
</li>
{% else %}
<li class="list-group-item">
<input class="form-check-input" type="checkbox" value="{{ item.id }}" id="check-box">
{{ item.title }}
</li>
{% endif %}
{% endfor %}
{% else %}
<p class="text-center">the task list is empty</p>
{% endif %}
</ul>
JS code:
<script>
// Check if checkbox pressed
$(document).on('click', '#check-box', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url 'check_boxes' %}',
data: {
item_id: $('#check-box').val(),
csrfmiddlewaretoken: '{{ csrf_token }}',
action: 'post'
},
success: function(json){
console.log(json)
document.getElementById("check-box").checked = true;
location.reload();
},
error: function(xhr, errmsg, err){
}
});
});
// Uncheck boxes
$(document).on('click', '#un-check-box', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url 'uncheck_boxes' %}',
data: {
item_id: $('#un-check-box').val(),
csrfmiddlewaretoken: '{{ csrf_token }}',
action: 'post'
},
success: function(json){
console.log(json)
document.getElementById("un-check-box").checked = false;
location.reload();
},
error: function(xhr, errmsg, err){
}
});
});
</script>
Python views:
def check_boxes(request):
if request.POST.get('action') == 'post':
item_id = int(request.POST.get('item_id'))
item = get_object_or_404(ToDoItem, id=item_id)
item.item_done = True
item.save()
response = JsonResponse({'item': item.item_done,
'item_id' : item_id
})
return response
def uncheck_boxes(request):
if request.POST.get('action') == 'post':
item_id = int(request.POST.get('item_id'))
item = get_object_or_404(ToDoItem, id=item_id)
item.item_done = False
item.save()
print(item.item_done)
response = JsonResponse({'item': item.item_done,
'item_id': item_id
})
return response
Task and ToDoItem model for understanding rest of code.
class Task(models.Model):
task_user = models.ForeignKey(AppUser, on_delete=models.CASCADE)
title = models.CharField(max_length=50)
description = models.TextField(max_length=1000)
date = models.DateField(default=datetime.datetime.today)
image = models.ImageField(upload_to='uploads/task/', blank=True)
is_done = models.BooleanField(default=False)
def __str_(self):
""" return object name"""
return self.title
class ToDoItem(models.Model):
title = models.CharField(max_length=100)
task = models.ForeignKey(Task, on_delete=models.CASCADE)
item_done = models.BooleanField(default=False)
def __str__(self):
"""return object name"""
return self.title
Please help me, I want to understand what I’m doing wrong and how I can fix it.