We Keep Coding

JS modal did not pop onclick

i want open a JS modal on click of Delete button to ask "are you want to delete this record" then it has two button cancel and delete. when i click the delete button on category page it does not any pop us where as in console it throw an error categories:654 Uncaught TypeError: deleteConfirmation is not a function
Here is my code:
categories.blade.php file
<tbody>
#php
$serial_no = ($categories->currentPage()-1)*$categories->perPage();
#endphp
#foreach ($categories as $category)
<tr>
<td>{{ ++$serial_no }}</td>
<td>{{ $category->name }}</td>
<td>{{ $category->slug }}</td>
<td>
<a class="text-info" style="margin: 0px 20px; " href="{{ route('admin/category.edit',['category_id'=>$category->id]) }}">Edit</a>
<a class="text-danger" style="margin-left: 20px;" href="#" onclick="deleteConfirmation({{ $category->id }})">Delete</a>
</td>
</tr>
#endforeach
</tbody>
this is the modal code (in same page)
<div class="modal" id="deleteConfirmation">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body pb-30 pt-30">
<div class="row">
<div class="col-md-12 text-center">
<h4 class="pb-3">Are you sure want to delete record?</h4>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#deleteConfirmation">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
Js script(in same page)
#push('scripts')
<script>
function deleteConfirmation(id)
{
#this.set('category_id',id);
$('#deleteConfirmation').modal('show');
}
</script>
#endpush

How to pass data to modal from database in Django?

I know there are too many questios like that but I couldn't figure out passing data to modal form from database in Django. I can do it in another url by using form but I want adding and updating datas in same page by using modal.
cekler.html
<button style = "float:right; width:10%; " type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Çek Ekle
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Çek Ekle</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="modal-content animate" method = "post" name="CekEklemeFormu" enctype="multipart/form-data">
{{form|crispy}}
{% csrf_token %}
<button type="submit">Ekle</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Vazgeç</button>
</form>
</div>
</div>
</div>
</div>
<br><br><br>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Çek Listesi</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="Cek" width="100%" cellspacing="0">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Çek No</th>
<th scope="col">Banka</th>
<th scope="col">Şirket</th>
<th scope="col">Alıcı</th>
<th scope="col">Tarih</th>
<th scope="col">Tutar</th>
<th scope="col">Vade</th>
<th scope="col">Durum</th>
<th scope="col">Ertelenen Tarih</th>
<th scope="col">Bilgi Güncelle</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="6" style="text-align:right" >Toplam:</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
{% for cek in ceklistesi %}
<tr>
<th scope="row"></th>
<td>{{cek.no}}</td>
<td>{{cek.banka}}</td>
<td>{{cek.sirket}}</td>
<td>{{cek.alici}}</td>
<td>{{cek.tarih|date:'d F Y'}}</td>
<td class="tutar">{{cek.tutar}}</td>
<td>{{cek.vade_hesabi}} Gün</td >
{% if cek.durum == 'Ertelendi' %}
<td class="bg-warning">{{cek.durum}}</td>
{% elif cek.durum == 'Ödenmedi' %}
<td class="bg-danger">{{cek.durum}}</td>
{% else %}
<td class="bg-success">{{cek.durum}}</td>
{% endif %}
<td>{{cek.erteleme_tarihi|date:'d F Y'}}</td>
<td><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal{{cek.id}}">Güncelle</button></td>
</tr>
<!--Modal-->
<div class="modal fade" id="modal{{cek.id}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Çek Güncelle</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{% url 'cekler:cekupdate' id=cek.id %}" class="modal-content animate" method = "post" name="CekGuncellemeFormu" enctype="multipart/form-data">
{{form|crispy}}
{% csrf_token %}
<button type="submit">Güncelle</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Vazgeç</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
</tbody>
</table>
</div>
</div>
views.py
def cekListesi(request):
ceklistesi = cekler.objects.all()
#Çek Ödenmeyen Toplam
odenmeyen = 0
for i in ceklistesi:
if i.durum == "Ödendi":
pass
else:
odenmeyen += i.tutar
#Çek Girdisi Ekleme
form = CekForm(request.POST or None)
if form.is_valid():
form.save()
messages.success(request,"Çek Başarıyla Eklendi!")
return redirect("cekler:ceklistesi")
context = {
"ceklistesi":ceklistesi,
"form":form,
"odenmeyen":odenmeyen,
}
return render(request,"cekler.html",context)
#Çek Güncelleme
def cekUpdate(request,id):
cek = get_object_or_404(cekler, id = id)
form = CekForm(request.POST or None,instance = cek)
if form.is_valid():
cek = form.save()
messages.success(request,"Kayıt Başarıyla Tamamlandı")
return redirect("cekler:ceklistesi")
return render(request,"cekupdate.html",{"form":form})
urls.py
app_name = "cekler"
urlpatterns = [
path("",views.cekListesi,name="ceklistesi"),
path("update/<int:id>",views.cekUpdate,name="cekupdate"),
]
I can edit and update my datas but I can't get datas to modal form from database.

Flask and JavaScript Confirm Before Deleting

I have a problem with flask app published pythonanywhere. This is a dashboard and if I click the title of the posting, it is supposed to show details of the posting. I want to add confirm message before delete. How can I make it? Now I try to use javascript, but it doesn't work. Below are my codes.
app.py
import MySQLdb as mysql
con = mysql.connect("host", "username", "password", "database")
con.ping(True)
#app.route('/deleteschool/<int:School_Id>')
def deleteschool(School_Id):
try:
if session.get('user'):
#con = mysql.connect()
cursor = con.cursor()
query_string = "DELETE FROM school WHERE School_Id = '{School_Id}'".format(School_Id=School_Id)
cursor.execute(query_string)
#cursor.execute("DELETE from school where School_Id=%s", (School_Id))
delete=cursor.fetchall()
if len(delete) is 0:
con.commit()
return redirect('/getSchoolList')
else:
return redirect('/error')
else:
return redirect('/error')
except Exception as e:
return redirect('/error')
school_page_showpost.html
<script src="/static/js/confirm.js"></script>
{% for row in schoolpost %}
<div id="titleOutput" class="two fields">
<div class="field">
<label>TITLE</label>
<textarea id="ckeditor1" class="cleditor" disabled="yes" readonly="yes" rows="1">{{row[1]}}</textarea></div></div>
<div id="contentsOutput" class="field">
<h6></h6>
<label>CONTENTS</label>
<textarea id="ckeditor2" class="cleditor" disabled="yes" readonly="yes" rows="10" cols="80">{{row[2]}}
</textarea>
<script>
var editor2=CKEDITOR.replace( 'ckeditor2' );
</script>
</div>
</div>
<div class="extra content">
<div class="right floated author">
<span class="right floated time">{{row[4]}} </span>
<span class="category">School board </span>
<span class="writer">
{{row[3]}}</span>
</div>
</div>
</div>
<br><br>
<ul class="actions pagination">
<li><a onclick="javascript : window.location = '/editschool/{{row[0]}}' " class="ui button">EDIT</a></li>
<li><button id="confirmDeleteSchool" type="submit" name="confirmDeleteSchool" class="ui button">DELETE</button></li>
<li><a href="/school" class="ui button" >LIST</a></li>
</ul>
{% endfor %}
confirm.js
$(function(){
$('#confirmDeleteSchool').click(function(){
var confirm = confirm("Are you sure?");
if (confirm == true) {
$.ajax({
url: '/delteschool/{{row[0]}}',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
} else {
}
});
});
If I click delete button, it is supposed to load confirm.js file and execute. But it does nothing. Please help.

An alternative approach for a similar task:
I implemented a confirmation step before deleting post through modal by using only HTML and jinja.
{% block body %}
<h1>Dashboard <small> Welcome {{session.username}} </small></h1>
<a class="btn btn-success" href="/add_article">Add Article</a>
<hr>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th></th>
<th></th>
</tr>
{% for article in articles %}
<tr>
<td>{{article.id}}</td>
<td>{{article.title}}</td>
<td>{{article.author}}</td>
<td>{{article.create_date}}</td>
<td> Edit </td>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalCenter{{article.id}}">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter{{article.id}}">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle{{article.id}}">Deleting Post Permanently</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>{{article.title}}??</h3>
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="{{url_for('delete_article', id=article.id)}}" method="post">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}

Including a js file in Flask works differently:
`<script type="text/javascript" src="{{ url_for('static', filename='js/confirm.js') }}"></script>`
With this you should be able to load the JS

Laravel 5.4: Delete Modal Not Obtaining Object

So I have a table of people, with each column containing certain values. At the end of each row, I have a "Delete" button. When that button is pressed, a modal pops up to confirm if you want to proceed with deleting that person. Clicking the "Delete" button again should delete the person and display a success message for it.
With the modal, I'm trying to make sure not only that a user needs to accept the action before proceeding, but also making sure that only the specific person in question is deleted. However, when I try to clarify the request it only contains the CSRF token that I'm passing through. Even when I try to more deliberately inject the targeted person into the modal the person isn't being sent through.
The important snippets of my code, for reference:
#foreach($people as $person)
<tr id="row{{ $loop->iteration }}">
<td id="first_name_row{{ $loop->iteration }}">{{ $person->first_name }}</td>
<td id="last_name_row{{ $loop->iteration }}">{{ $person->last_name }}</td>
<td id="email_row{{ $loop->iteration }}">{{ $person->email }}</td>
<td>
<input type="button" id="delete_button_row{{ $loop->iteration }}" class="btn btn-btn-submit delete" value="Delete" onclick="delete_modal('{{ $loop->iteration }}', {{ $person }})">
</td>
</tr>
#endforeach
..........
<!-- Modal -->
<div class="modal fade" id="DeleteModal" role="dialog">
<div class="modal-dialog">
<form class="form-horizontal style-form" id="model-form" data-toggle="validator" role="form" method="post" action="/employer/delete-person">
<!-- Modal content-->
{{ csrf_field() }}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete This Person</h4>
</div>
<div class="modal-body">
<p>Are you sure you would like to do that?</p>
<input id="delete_ex">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" id="modal-execute" class="btn btn-btn-submit">Delete</button>
</div>
</div>
</form>
</div>
</div>
......
<script>
function delete_modal(num, person){
$('#delete_button_row' + num).attr("data-toggle" , "modal");
$('#delete_button_row' + num).attr("data-target", "#DeleteModal");
$('#delete_ex').val(person);
}
.......
</script>

Bootstrap Modal form appearing just in my local machine

My modal form won't appear in my web-site.
When i launch it in my localhost, appear and no problem, but in my website, i have 2 problem
1- don't appear
2- all the page under the place of this modal form is inaccessible.
My page has this source code :
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
{{ prime.primeponctUtil ? 'Modifier affectation' : 'Affecter la prime à un TA'}}
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Choisissez un TA</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Login</th>
<th>Nom</th>
<th>Prenom</th>
</tr>
</thead>
<tbody>
{% for util in utilisateurs %}
<tr>
<td><a href="{{ path('prime_affectation', {'myprime':prime.id , 'myutil':util.id }) }}" >{{ util.utilLogin }}</a></td>
<td>{{ util.utilNom }}</td>
<td>{{ util.utilPrenom }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>