Django Adding Item Mismatching - django

Question

I'm currently working on To-Do App using Django.
I have two models Todo and Task. I want to create a Todo and under the todo items I want to create a task items.
As I was able to add todo items and task items.
But the problem is If I want to add task item for Maths by default all the task Items are getting added to the first todo items. I think It's becaude In Task modal(pop up) form I have linked function url to retrieve the todo objects id when the add button clicked and also added bootstrap modal(pop up) form to the a-tag in html. It's not retrieving the corresponding todo item id instead It takes the 1st todo item id.(refer below images)
models.py
class Todo(models.Model):
date_created = models.DateTimeField(auto_now_add=True)
completed = models.BooleanField(default=False)
title = models.CharField(max_length=200)
user_id = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
def __str__(self):
return self.title
class Task(models.Model):
heading = models.CharField(max_length=100)
todo = models.ForeignKey(Todo, on_delete=models.CASCADE, related_name='tasks')
date_created = models.DateTimeField(auto_now_add=True)
completed = models.BooleanField(default=False)
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
def __str__(self):
return self.heading
views.py
from django.shortcuts import render, redirect, get_object_or_404
from django.http import HttpResponse, Http404, HttpResponseNotFound, JsonResponse, HttpResponseRedirect
from .models import Todo, Task
from .forms import *
from django.utils import timezone
from django.contrib.auth.forms import UserCreationForm
from django.views.decorators.csrf import csrf_protect
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
from django.views.generic import View
from django.contrib.auth.models import User
from django.core.paginator import Paginator
def register(request):
form = userRegisterForm()
if request.method == 'POST':
form = userRegisterForm(request.POST)
if form.is_valid():
form.save()
username = form.cleaned_data.get('username')
password = form.cleaned_data.get('password2')
return redirect('login')
else:
form = userRegisterForm()
context = {'form': form}
return render(request, 'todo/register.html', context)
def logoutUser(request):
logout(request)
return redirect('login')
#login_required(login_url='login')
def home(request):
todo_form = TodoForm()
task_form = TaskForm()
current = timezone.now()
todo_items_upcoming = Todo.objects.filter(user_id=request.user, completed=False).order_by('-date_created')
todo_items_completed = Todo.objects.filter(user_id=request.user, completed=True).order_by('-date_created')
pagi1 = Paginator(todo_items_upcoming, 4)
pagi2 = Paginator(todo_items_completed, 4)
page_num = request.GET.get('upcoming', 1)
page_num2 = request.GET.get('completed', 1)
page_obj = pagi1.get_page(page_num)
page_obj2 = pagi2.get_page(page_num2)
if request.method == "POST":
todo_form1 = TodoForm(request.POST)
if todo_form1.is_valid():
data = todo_form1.cleaned_data.get('title')
obj = Todo.objects.create(
date_created=current, title=data, user_id=request.user)
context = {'todo_form': todo_form, 'page_obj': page_obj, 'page_obj2': page_obj2,
'pagi1': pagi1, 'pagi2': pagi2, 'page_num2': int(page_num2), 'page_num': int(page_num), 'task_form': task_form}
return render(request, 'todo/main.html', context)
#login_required(login_url='login')
def update_todo(request, pk):
try:
obj = Todo.objects.get(id=pk, user_id=request.user)
print(obj)
except Exception as err:
raise Http404(err)
if request.method == 'POST':
upform = TodoForm(request.POST, instance=obj)
if upform.is_valid():
upform.save()
return redirect('/')
#login_required(login_url='login')
def add_task(request, pk):
try:
obj = Todo.objects.get(id=pk, user_id=request.user)
print(obj)
except Exception as err:
raise Http404(err)
if request.method == 'POST':
Task.objects.create(heading=request.POST.get('heading'), date_created=timezone.now(),
todo=obj, user=request.user)
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
#login_required(login_url='login')
def delete_todo(request, pk):
try:
obj = Todo.objects.get(id=pk, user_id=request.user)
except Exception as err:
try:
obj = Task.objects.get(id=pk, user=request.user)
except Exception as err:
raise Http404(err)
obj.delete()
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
#login_required(login_url='login')
def completed_todo(request, pk):
try:
obj = Todo.objects.get(id=pk, user_id=request.user)
except Exception as err:
try:
obj = Task.objects.get(id=pk, user=request.user)
except Exception as err:
raise Http404(err)
obj.completed = True
obj.save()
# return redirect('/')
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
main.html
{% extends 'todo/index.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="center-column">
<h5 class="card-title">Create your List</h5>
<form action="" method="POST" id="addTodo">
{% csrf_token %}
<div class="input-group-append">
{{ todo_form.title }}
<button type="submit" class="form-control btn btn-primary mb-3 mr-sm-2" id="addItem">
Add Items
</button>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Upcoming Items</h4>
<hr/>
{% for i in page_obj %}
<ul class="list-group" id="upcomingItems">
<li class="list-group-item list-group-item-primary mb-1" id="upcomingItem">
{{ i.title }}
<div class="float-right">
<button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
Completed
</button>
<button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
❌
</button>
</div>
<div class="float-right">
<!-- Button trigger modal for Update Todo Modal-->
<button type="submit" class="btn btn-sm btn-success ml-1 mt-1 mr-1 mb-1" id="update_btn">
<a href="{% url 'update_todo' i.id %}" data-toggle="modal" data-target="#updateTodoModal_{{i.id}}">Update
</a>
</button>
</div>
<div class="float-right">
<!-- Button trigger modal for Adding TaskModal-->
<button type="submit" class="btn btn-sm btn-primary ml-1 mt-1 mr-1 mb-1" id="addBtn">
<a href="{% url 'addTask' i.id %}" data-toggle="modal" data-target="#taskModal_{{i.id}}" name="todoObj">
Add
</a>
</button>
</div>
<!-- Task Modal for adding tasks under todo items -->
<div class="modal fade" id="taskModal_{{ i.id }}" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Add New Task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{% url 'addTask' i.id %}" method="POST" id="addTask">
{% csrf_token %}
<div class="card card-body">
{{ task_form.heading }}
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit">Submit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Update Todo Modal for updating Todo Items -->
<div class="modal fade" id="updateTodoModal_{{i.id}}" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Update ToDo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{% url 'update_todo' i.id %}" method="POST">
{% csrf_token %}
<div class="card card-body">
{{ todo_form|crispy }}
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit">Submit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% for j in i.tasks.all %}
{% if j.completed == False %}
<div class="card mt-4">
<ul class="list-group">
<li class="list-group-item list-group-item-danger" id="upcomingItem">
{{ j.heading }}
<div class="float-right">
<button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
Completed
</button>
<button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
❌
</button>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
</li>
</ul>
{% endfor %}
<hr/>
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li class="page-item {% if page_obj.page_number == page_num %} active {% endif %}">
<a class="page-link" href="?upcoming={{ page_obj.previous_page_number }}&completed={{ page_num2 }}">&laquo</a>
</li>
{% endif %}
{% for i in pagi1.page_range %}
<li class="page-item {% if i == page_num %} active {% endif %}">
<a class="page-link" href="?upcoming={{ i }}&completed={{ page_num2 }}">{{ i }}</a>
</li>
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item {% if page_obj.page_number == page_num %} active {% endif %}">
<a class="page-link" href="?upcoming={{ page_obj.next_page_number }}&completed={{ page_num2 }}">&raquo</a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Completed Items</h4>
<hr/>
<ul class="list-group" id="upcomingItems">
{% for i in page_obj2 %}
<li class="list-group-item list-group-item-primary mb-1" id="upcomingItem">
{{ i.title }}
<div class="float-right">
<button type="submit" class="btn btn-sm btn-success ml-1 mt-1 mr-1 mb-1" id="update_btn">
Update
</button>
<button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
❌
</button>
</div>
{% for j in i.tasks.all %}
<div class="card mt-4">
<ul class="list-group">
<li class="list-group-item list-group-item-danger" id="upcomingItem">
{{ j.heading }}
<div class="float-right">
<button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
Completed
</button>
<button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
❌
</button>
</div>
</li>
</ul>
</div>
{% endfor %}
</li>
{% endfor %}
</ul>
<hr/>
<ul class="pagination justify-content-center">
{% if page_obj2.has_previous %}
<li class="page-item {% if page_obj2.page_number == page_num %} active {% endif %}">
<a class="page-link" href="?completed={{ page_obj2.previous_page_number }}&upcoming={{ page_num }}">&laquo</a>
</li>
{% endif %}
{% for i in pagi2.page_range %}
<li class="page-item {% if i == page_num2 %} active {% endif %}">
<a class="page-link" href="?completed={{ i }}&upcoming={{ page_num }}">{{ i }}</a>
</li>
{% endfor %}
{% if page_obj2.has_next %}
<li class="page-item {% if page_obj2.page_number == page_num %} active {% endif %}">
<a class="page-link" href="?completed={{ page_obj2.next_page_number }}&upcoming={{ page_num }}">&raquo</a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
forms.py
class TodoForm(forms.ModelForm):
class Meta:
model = Todo
fields = ['title', 'completed']
class TaskForm(forms.ModelForm):
class Meta:
model = Task
fields = ['heading', 'todo', 'completed']
class userRegisterForm(UserCreationForm):
email = forms.EmailField()
class Meta:
model = User
fields = ['username','email','password1','password2']
urls.py
urlpatterns = [
path('', views.home, name='home'),
path('update_todo/<int:pk>/', views.update_todo, name='update_todo'),
path('completed/<int:pk>/', views.completed_todo, name="completed_todo"),
path('delete_todo/<int:pk>/', views.delete_todo, name='delete_todo'),
path('add_task/<int:pk>/', views.add_task, name='addTask'),
path('register/', views.register, name='register'),
path('login/', auth_views.LoginView.as_view(template_name='todo/login.html'), name='login'),
path('logout/', auth_views.LogoutView.as_view(template_name='todo/logout.html'), name='logout'),
]
Image-1
Task form Popup modal using bootstrap for adding task items under a todo.
Image-2
Whenever I add task items for other todo items, those task items are getting stored to 1st todo items not to their corresponding todo items. I have added two task items on Maths Todo item but those Maths-1 and Maths-2 was created under 1st todo item.

Answer 1

You are creating n taskModal modals with the same id, which is wrong and is causing the error of opening only the first modal with id taskModal for all add operations. You need to have unique id for every element in your html. I would like to do a lot of changes to your code but for now let's get your code working.
Change the data-target for add button from data-target="#taskModal" to data-target="#taskModal_{{ i.id }}" , similarly change the id of taskModal from taskModal to taskModal_{{ i.id }}
You need to do the similar changes for update todo.

Answer 2

<button
id={{i.id}}
type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#taskModal">
Add
</button>
<script>
// This event is fired when the modal has been made visible to the user
$('#taskModal').on('shown.bs.modal', function (e) {
let id = e.relatedTarget.id // get the id from the button
$('#addTask').attr('action', `/add_todo/${id}/`); // update the action with the id
});
</script>
Also you must improve the variables and functions names, we code for other devs!