We Keep Coding

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.

Modal Form Connected to SQLite3

I have the following code that is purposed to display a table of data and allow the user to add a new row by clicking a +New button, which opens a modal with the correct form, and then the user hits submit and the new row saves in the table.
I am struggling to convert the modal from static, fake data to the data coming from my SQLite3 database. Anytime I try and add my fields (e.g. { stakeholder.employee }) into the modal I get an error:
Error:
Invalid block tag on line 123: 'stakeholder.id'. Did you forget to register or load this tag?
Table of existing data with a button on top to add a new row:
<div class="col-md-12">
<button type="button" class="btn btn-primary badge-pill float-right" style="font-size: 14px; width:80px;" data-toggle="modal" data-target="#new">+ New</button>
</div>
<table class="table table-hover" style="width:90% ">
<thead>
<tr style="font-family: Graphik Black; font-size: 14px">
<th scope="col">#</th>
<th scope="col">Employee</th>
<th scope="col">Stakeholder Group</th>
<th scope="col">Quadrant</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
{% for stakeholder in stakeholder_list %}
<tr style="font-family: Graphik;font-size: 12px">
<td>{{ stakeholder.id }}</td>
<td style="font-size: 15px">{{ stakeholder.employee }}</li></td>
<td>{{ stakeholder.stakeholder_group }}</td>
<td>{{ stakeholder.stakeholder_quadrant }}</td>
<td>{{ stakeholder.description }}</td>
<td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px" data-toggle="modal" data-target="#new">Edit</button></td>
</tr>
{% endfor %}
</tbody>
</table>
And a Modal that I am trying to convert into a form:
<div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Customer Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{% csrf_token %}
{{ form.non_field_errors }}
<form>
{% for field in form %}
{% endfor %}
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Doe, John">
<small id="emailHelp" class="form-text" style="color:red"><i>*Required Field</i></small>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<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>
models.py
class Stakeholder(models.Model):
employee = models.CharField(max_length=200)
stakeholder_group = models.CharField(max_length=200)
description = models.CharField(max_length=200)
stakeholder_quadrant = models.CharField(max_length=200)
def __str__(self):
return self.stakeholder

The error being raised:
Invalid block tag on line 123: 'stakeholder.id'. Did you forget to register or load this tag?
In my experience can be raised in cases such as the following:
An unclosed tag within the document
Malformed mustache variable {% stakeholder.id %} maybe?
Entangled tags?
So I recommend you sift through your template for such cases. My bet is thats where your problem is coming from.

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>

Meteor - template helpers argument (spacebars)

I need some thoughts about how to solve my problem. I have the following html template with a table. It shows 5 rows and at the end of each row (in the last td) there is a button which triggers a bootstrap modal (popup window).
I am using spacebars {{#each}} to loop through all the cursors, but the problem is with the modal. It only shows the data for the first row, for every row-record the same data.
This is because the ID for the modal is the same for every record (it is the first one, #subsPopup). I need somehow to pass it different ID for every row, like #subsPopup{{var}}. Any idea how could I do this?
<!-- subscribers table -->
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Created</th>
<th>Modified</th>
<th>Mailing lists</th>
</tr>
</thead>
<tbody>
{{#each subsList}}
<tr>
<td>{{firstName}}</td>
<td>{{lastName}}</td>
<td>{{email}}</td>
<td>{{createdDate}}</td>
<td>{{modifiedDate}}</td>
<!-- Trigger the modal (popup window) with a button -->
<td>
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#subsPopup">Show</button>
<!-- Modal -->
<div id="subsPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mailing List for <b>{{firstName}} {{lastName}}</b> ({{email}})</h4>
</div>
<div class="modal-body">
<p>{{mailLists}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>

Your subscriptions collection probably has the _id field, so you might try outputting {{_id}}

In case anyone else comes across this issue...
My method of solving this ... (not sure if this is the most elegant , but it did work for me )
Here is an example:
[Meteor Template File - "coolmodal.html" - containing a bootstrap modal component]
<template name="mymodal">
<!-- This button we can use to trigger the modal to display-->
<button class="btn btn-success btn-lg" type="button">
<div class="modal fade" id="mycoolmodal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{modalDetails}}</h4>
</div>
<div class="modal-body">
<p>Cool stuff I like to write here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
[Meteor Client JS file - "cool.js" - containing template helpers, etc]
Template.mymodal.events({
'click .img-thumbnail'(event, instance) {
event.preventDefault(); // Stops the page from attempting a reload.
Session.set('myInfoForModal', this.my_data_you_want);
$('#coolmodal').modal('show');
}
});
Template.registerHelper('modalDetails',function(input){
return Session.get("myInfoForModal");
});

jquery, django-deleteview: delete table row records

I am trying to open up a twitter bootstrap model for the confirmation of deleting the records while constructing a simple CRUD application.
this is where the confirmation message appears in a bootstrap modal form with delete button at the end to let us delete the selected row.
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myEditModalLabel" 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"></span></button>
<h4 class="modal-title" id="myDeleteModalLabel"></h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete {{ obj.name }}?</p>
<form action="" method="post" id="delete_form" id="form-modal-body">
<div class="modal-footer">
<button class="btn btn-danger btn-small pull-left" data-dismiss="modal">
<i class="icon-remove"></i>Cancel
</button>
<button type="button" class="btn btn-primary" id="delete_submit">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
And this is where the records are listed with a delete action at the end of each row:
<tbody id="new-day-row">
{% for day in object_list %}
<tr class="odd">
<td id='day-{{day.id}}'>{{ day.name }}</td>
<td id='workday-{{day.id}}'>{{ day.work_day }}</td>
<td class="td-actions">
<a class="red" href="#" data-toggle="modal" data-target="#myDeleteModal">
<i class="icon-trash bigger-130"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
A very simple deleteView:
class DayDeleteView(DeleteView):
model = Day
def get_success_url(self):
return reverse('day_home')
I was hoping to get an answer to trigger the delete action in jquery. I had so far tried to bind the .remove() function on the click event of the button but was not successfull whatsoever and truly not worth it to post here. I Would be very thankfull for suggestions and answers.

I'd just use on:
html:
<div class="modal-footer" id="{{obj.id}}">
jquery:
$('#delete_submit').on('click', function() {
var id = $('.modal-footer').attr('id');
$.ajax({
url: "your/delete/handler",
type: "POST",
data: { id : id },
});