We Keep Coding

Django class based signup view form not show up in bootstrap modal

I try to look up my signup view as a bootstrap modal but when click form doesn't show
class SignUpView(CreateView):
form_class = UserCreationForm
template_name = 'avapp/signup.html'
success_message = 'Success: Sign up succeeded. You can now Log in.'
success_url = reverse_lazy('index')
views.py
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1 style="text-align: center;color: #568203 " > Avakado App</h1>
<center>
<a class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#exampleModal " >
<img style="text-align: center" src="{% static '1_org.jpg' %}" width="300" height="450" >
</a>
</center>
{% endblock %}
index.html
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/signup" method="POST">
<div class="modal-body">
{% csrf_token %}
{{form}}
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
signup.html
this is the modal form looks like
Can I figure it out without using Ajax or something else or do I have to change my signup view from class based views to something else

Modal window not called after button click

I'm making my first website, using Django, python and bootstrap 5, I want a person to click the "submit" button after filling out the form and after that a modal window pops up in which it would say that "everything is OK, your application has been created"
<div class="row mt-5 mb-5 p-2">
<form action="{% url 'feedback_view' %}" method="POST">
{% csrf_token %}
<div class="col-md-6 mb-2">
<label for="exampleInputName" class="form-label">Ваше Имя</label>
<input name="name" class="form-control" id="exampleInputName" aria-describedby="NameHelp">
</div>
<div class="col-md-6 mb-2">
<label for="exampleInputphone" class="form-label">Ваш Телефон</label>
<input name="phone" class="form-control" id="exampleInputphone" aria-describedby="NameHelp" placeholder="+7 (918) 000-00-00">
</div>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">send</button>
</form>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">send_btn</button>
but for some reason the "send" button does not work, but the "send_btn" button works, which I made to check the problem. all I understand at the moment is what bothers me, type="submit" because in the afternoon there is type="button". How can I solve this problem, given that this is a form submission button? this is the window code:
{% if messages %}
{% for message in messages %}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="reviews">{{ message }}</p>
</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>
{% endfor %}
{% endif %}
it's views.py
class FeedBackView(View):
def post(self, request):
form = FeedBackForm(request.POST)
if form.is_valid():
form.save()
messages.add_message(request, settings.MY_INFO, 'now call you!')
else:
messages.add_message(request, settings.MY_INFO, 'something was wrong')
return redirect("/")

Hello guys when i click on the button that is the title i got the same blog for each title

when i clikc on django title i get django post and when i click on javascript title i get django post ether am not using any frame_work and this my blog page i really try every solution i know but Unfortunately nothing happend
And here an image
blog.html
{% for blog in blogs %}
<div class="col-xl-12 col-md-6 col-xs-12 blog">
<div class="right-text-content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<h2 class="sub-heading">{{blog.title|title}}</h2>
</button>
<!-- Modal -->
<div class="modal fade align-self-end mr-3 " id="myModal" tabindex="1" role="dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{blog.title|title}}</h5>
<h6 class="float-right">{{blog.created_at}}</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{blog.content|linebreaks}}
</div>
<div class="modal-footer">
<h5>Created by {{blog.name}}</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
<br>
<a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
<br>
{{blog.content|linebreaks}}
</p>
{{blog.created_at}}
</div>
</div>
{% endfor %}
views.py
from django.shortcuts import render
from .models import DigitalTeam, Blog
def index(request):
pers = DigitalTeam.objects.all()
return render(request, 'index.html', {'pers':pers})
def blog(request):
pers = DigitalTeam.objects.all()
blogs = Blog.objects.all()
return render(request, 'blog.html', {'pers':pers, 'blogs':blogs})
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('blog', views.blog, name='blog'),
]
So guys what am i missing

To get individual blog details in the modal you need to pass the blog id to the modal as a prop.
It can be done by adding blog.id in the button data-target prop and receive the blog.id in modal id prop.
the solution in given below,
{% for blog in blogs %}
<div class="col-xl-12 col-md-6 col-xs-12 blog">
<div class="right-text-content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal{{blog.id}}">
<h2 class="sub-heading">{{blog.title|title}}</h2>
</button>
<!-- Modal -->
<div class="modal fade align-self-end mr-3 " id="myModal{{blog.id}}" tabindex="1" role="dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{blog.title|title}}</h5>
<h6 class="float-right">{{blog.created_at}}</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{blog.content|linebreaks}}
</div>
<div class="modal-footer">
<h5>Created by {{blog.name}}</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
<br>
<a rel="nofollow noopener" href="{{blog.name_url}}" target="_parent">{{blog.name}}</a>
<br>
{{blog.content|linebreaks}}
</p>
{{blog.created_at}}
</div>
</div>
{% endfor %}

Bootstrap Modal is not working with "for" in jinja 2

I am using bootstrap modal in my flask blog where is put the bootstrap modal inside the {% for blog in blogs %} section where I pass the {{blog.id}} in my modal.
But every modal is showing the same first {{blog.id}} (for ex. 1 in every modal) where every modal should have the id of it's respective blog.
Here is the code -
{% for blog in blogs %}
<div class="col-md-12">
<div class="mu-blog-area">
<!-- Title -->
<div class="row">
<div class="col-md-8">
<h1 class="mu-blog-item-title">{{blog.title}}</h1>
<p>{{blog.body}}</p>
<form action="/blog_detail/{{blog.id}}" method="post">
<button class="mu-blg-readmore-btn" type="submit">Read more <i class="fa fa-long-arrow-right"></i></button>
</form>
<div class="mu-blog-navigation">
<button class="mu-blog-nav-btn mu-blog-nav-prev ><span class="fa fa-trash-o"></span>Delete Post</button>
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
</div>
</div>
<!-- Blog Navigation -->
</article>
<!-- End single item -->
</div>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Warning! READ THIS</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
If you edit this post then your media content of this blog (photos, videos & audio) will be deleted automaticlly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="/edit_blog/{{blog.id}}" method="post">
<h1>{{blog.id}}</h1>
<button type="submit" class="btn btn-primary">Yes I will edit</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
What is going wrong here?

I should have to give different id to every modal so that every blog modal trigger button can access it's own modal.
I should replace the trigger button code like this -
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#{{blog.id}}exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
And the modal id like this -
<div class="modal fade" id="{{blog.id}}exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
That's a very simple solution. You have to make the id to be unique for every modal.
That's it.

Python Flask not deleting correct post with the given post title from SQLAlchemy database

I'm trying to delete a post from a SQLAlchemy database in flask by grabbing the post using the post's title.
However, it seems to be deleting the first row in the post table, instead of deleting the actual post that I intended to delete.
Here is the delete post route:
#post.route('/admin_delete_post/<post_title>', methods=['POST'])
def delete_post(post_title):
from mysite import db
from mysite.models import Post
post = Post.query.filter_by(title=post_title).first()
if post:
db.session.delete(post)
db.session.commit()
flash('Post has been deleted successfuly!', 'danger')
return redirect(url_for('main.home'))
else:
abort(404)
here is the html code:
{% extends 'layout.html' %}
{% block content %}
{% for post in posts %}
{% if current_user.is_authenticated %}
..............
..............
<!-- Button trigger modal -->
<button style="display: inline; float: left; margin-right: 10px;" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete this post
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Warning!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure to delete this post?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
<form style="float: right; margin-left: 10px;" action="{{ url_for('post.delete_post', post_title=post.title) }}" method="post">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
</div>
</div>
</div>
</div>
<a href="{{ url_for('post.edit_post', post_title=post.title) }}">
<button style="display: inline; float: left;" type="button" class="btn btn-primary">
Edit this post
</button>
</a>
</div>
<!-- Blog Post End -->
{% endfor %}