I am trying to make CRUD app in django
I am trying to collect data from form and trying to display the data in form of tables
So the user can read, delete, update or delete the data
I completed other 3 operation but I am not able to find the error in update table operation
I am attaching my code below please help me
thankyou
I am trying to use bootstrap models to edit the data, however on clicking the edit button the popup is not showing, I am expecting to edit the data once is displayed in form of tables
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../static/assets/css/all.min.css">
<link rel="stylesheet" href="../static/assets/css/main-style.css">
<link rel="stylesheet" href="../static/assets/css/responsive.css">
</head>
<body>
{% if messages %}
{% for message in messages %}
<div class="alert " role="alert">
<strong>{{ message }}</strong>
</div>
{% endfor %}
{% endif %}
<div class="main-wrapper">
<div class="container">
<div class="main-inner-wrapper">
<h1>Please List The Task with title,description and Duedate</h1>
<div class="task-table">
<form class="row g-3" action="/" method="post">
{% csrf_token %}
<div class="col-md-12">
<label for="title" class="form-label">Title</label><br>
<input type="text" class="form-control" id="title" aria-describedby="title" name="title">
</div>
<div class="col-md-12">
<label for="description" class="form-label">Description</label>
<br>
<textarea class="form-control" aria-label="With textarea" name="description"></textarea>
</div>
<div class="col-md-12">
<label for="Due-Date" class="form-label">Due-Date</label><br>
<input type="text" name="duedate" class="form-control" id="date" aria-describedby="date">
</div>
<button type="submit" class="btn btn-primary col-md-4 text-center">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="table">
<div class="container">
<h1>The tasks are listed below</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for task in task_list %}
<tr>
<td>{{ task.title }}</td>
<td>{{ task.description }}</td>
<td>{{ task.duedate }}</td>
<td>
<form method="post" action="{% url 'delete_task' task.id %}">
{% csrf_token %}
<input type="hidden" name="task_id" value="{{ task.id }}">
<button type="submit">Delete</button>
</form>
</td>
<td>
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#editModal{{ item.id }}">
EDIT
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Bootstrap Modal -->
{% for item in data %}
<div class="modal fade" id="editModal{{ item.id }}" tabindex="-1"
aria-labelledby="editModal{{ item.id }}" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModal{{ item.id }}">EDIT YOUR TASK</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post" action="{% url 'edit_data' item.id %}">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Save Changes</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<script src="../static/assets/js/all.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
MODELS.PY
from django.db import models
# Create your models here.
class Tasks(models.Model):
title=models.CharField(max_length=50)
description=models.TextField()
duedate=models.CharField(max_length=10)
def __str__(self):
return self.title
VIEWS.PY
from django.shortcuts import render,redirect
from django.conf.urls import include
from django.http import HttpResponse
from home.models import Tasks
from django.contrib import messages
from .forms import TasksForm
# Create your views here.
def index(request):
if request.method=="POST":
title=request.POST.get('title')
description=request.POST.get('description')
duedate=request.POST.get('duedate')
task=Tasks(title=title,description=description,duedate=duedate)
task.save()
# messages.success(request, "tasks details updated.")
task_list = Tasks.objects.all()
return render(request,'index.html',{'task_list': task_list})
def delete_task(request, task_id):
if request.method == 'POST':
try:
task = Tasks.objects.get(pk=task_id)
task.delete()
except Task.DoesNotExist:
pass # Handle the case where the record does not exist
return redirect('index')
def edit_data(request, item_id):
instance = get_object_or_404(Tasks, id=item_id)
if request.method == 'POST':
form = TasksForm(request.POST, instance=instance)
if form.is_valid():
form.save()
return redirect('index') # Redirect to the view displaying the data table
else:
form = TasksForm(instance=instance)
return render(request, 'index.html', {'form': form})
def create_record(request):
if request.method == 'POST':
form = TasksForm(request.POST)
if form.is_valid():
form.save()
return redirect('success_page')
else:
form = TasksForm()
return render(request, 'index.html', {'form': form})
URLS.PY
from django.contrib import admin
from django.urls import path
from home import views
urlpatterns = [
path('', views.index, name="index"),
path('delete_task/<int:task_id>/', views.delete_task, name='delete_task'),
path('create/', views.create_record, name='create_record'),
path('edit/<int:item_id>/', views.edit_data, name='edit_data'),
]
FORMS.PY
from django import forms
from .models import Tasks
class TasksForm(forms.ModelForm):
class Meta:
model = Tasks
fields = ['title', 'description','duedate'] # List the fields you want in the form
For your modal that does not show up, in INDEX.HTML, you have 2 "id" attributes with the same value :
<div class="modal fade" id="editModal{{ item.id }}"
and inside the modal :
<h1 class="modal-title fs-5" id="editModal{{ item.id }}">
"id" attributes must be unique in the page.
Hope it helps