Must I add to JavaScript section or not?
HTML
</head>
<body>
<div class="container-xl">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2><b>Shipping</b></h2>
</div>
<div class="col-sm-6">
</i> <span>Add New Shipping</span>
<div class="col-sm-6">
<div class="search-box">
<div class="input-group">
<input type="text" id="search" class="form-control" placeholder="Search by Name">
<span class="input-group-addon"><i class="material-icons"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Destination</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for shipping in shipping_info %}
<tr>
<td>{{ shipping.shipping_id }}</td>
<td>{{ shipping.driver_id.driver_fname }} {{ shipping.driver_id.driver_lname }}</td>
<td>{{ shipping.destination }}</td>
<td>{{ shipping.ship_date }}</td>
<td>
</i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
<a href="{% url 'view_shipping' shipping.shipping_id %}" class="" ><span class="material-icons">
visibility
</span></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
HTML:
<!-- Delete Modal HTML -->
<form method="post" action="">
{% csrf_token %}
<div id="deleteEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-danger" value="Delete">
</div>
</form>
</div>
</div>
</div>
</form>
{% endblock %}
</body>
</html>
I can delete but it doesn't have modal so I added this but when I add it can't delete.
view
def delete_shipping(request,pk):
del_dri = shipping.objects.get(shipping_id=pk)
del_dri.delete()
return redirect('table_shipping')
The problem is a funny error in the modal form
Url
path("delete_shipping/<str:pk>",views.delete_shipping,name='delete_shipping'),
You're tried change input:
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-danger" value="Delete">
</div>
to:
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<a hrfe= "{% url "delete_shipping" %}" class="btn btn-danger">Delete </a>
</div>
?
Related
I'm new in Django and i like to implement a Modal to delete records. The problem is a funny error in the modal form because is expecting a parameter. The modal link has this
but I don't know how add the right parameter.
This is my List in html
<table id="tablaAlmacenes" class="table table-bordered table-striped">
<thead>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</thead>
<tbody>
{% for almacen in object_list %}
<tr>
<td>{{ almacen.almacen }}</td>
<td>{{ almacen.descripcion }}</td>
<td>
<div>
Detalles
<a a href="" class="btn btn-link text-primary">Editar</a>
<a class="btn btn-link deleteAlmacen" data-id="{{ almacen.id}}"><span class="fas fa-trash text-danger"></a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</tfoot>
</table>
this is my url.py
urlpatterns = [
path('',include('polls.urls'),name='home'),
path('admin/', admin.site.urls),
# path('contact/',views.contact, name='contacto')
path('almacenes/', AlmacenesListView.as_view(), name='almacenes'),
path('almacenes/nuevo', AlmacenesCreateView.as_view(), name='crear_almacen'),
path('almacenes/<int:id>/remove/', AlmacenesDeleteView.as_view(), name='eliminar_almacen')
]
This is my views.py
class AlmacenesListView(ListView):
model = Almacen
template_name = 'pages/index.html'
success_message = "Bien!!!!"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['title'] = "Lista de Almacenes"
print(reverse_lazy('almacenes'))
return context
class AlmacenesCreateView(SuccessMessageMixin, CreateView):
model = Almacen
form_class = AlmacenesForm
success_url = reverse_lazy('almacenes')
success_message = "Bien!!!!"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
return context
class AlmacenesDeleteView(DeleteView):
model = Almacen
success_url = reverse_lazy('almacenes')
and my modal code
<div class="modal fade" aria-modal="false" id="deleteAlmacenModal">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmación</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>¿Desea eliminar el Almacen?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<form action="{% url 'eliminar_almacen' (some parameter here but error) %}" method="POST">
{% csrf_token %}
<input type="hidden" name="id" id="almacen_id"/>
<button type="submit" class="btn btn-danger">Eliminar</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
scrpt for modal
$(document).on('click','.deleteAlmacen',function(){
var id_almacen=$(this).attr('data-id');
$('#almacen_id').val(id_almacen);
$('#deleteAlmacenModal').modal('show');
});
So, if you are using bootstrap you don't need to trigger the modal with jquery but let bootstrap do the magic.
Your code should be something like that:
html:
<table id="tablaAlmacenes" class="table table-bordered table-striped">
<thead>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</thead>
<tbody>
{% for almacen in object_list %}
<tr>
<td>{{ almacen.almacen }}</td>
<td>{{ almacen.descripcion }}</td>
<td>
<div>
Detalles
<a a href="" class="btn btn-link text-primary">Editar</a>
<a class="btn btn-link" data-toggle="modal" data-target="#deleteAlmacenModal{{almacen.id}}""><span class="fas fa-trash text-danger"></a> <!-- data-toggle and data-target work in bootstrap4, in 5 is data-bs-target and data-bs-toggle -->
{% include 'yourtemplatefolder/modals/delete_almacen_modal.html' %} <!-- as best practice create another folder called modals and put there you modal.html files, as in this case and include them in your code -->
</div>
</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</tfoot>
</table>
Now, being the modal called inside the for loop, you can fix your modal like this:
delete_almacen_modal.html
<div class="modal fade" aria-modal="false" id="deleteAlmacenModal{{almacen.id}}">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmación</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>¿Desea eliminar el Almacen?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<form action="{% url 'eliminar_almacen' pk=almacen.id %}" method="POST">
{% csrf_token %}
<input type="hidden" name="id" id="almacen_id"/>
<button type="submit" class="btn btn-danger">Eliminar</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Now that should work.
I'm developing the backend of my personal blog and I've create a view that delete a single tag of the post.
views.py
from django.shortcuts import get_object_or_404, redirect, render
from django.utils.text import slugify
from .forms import BlogTagForm
from .models import BlogTag
def deleteBlogTag(request, slug_tag):
if request.method == 'POST':
tag = BlogTag.objects.get(slug_tag=slug_tag)
tag.delete()
return redirect('tag_list')
models.py
from django.db import models
from django.urls import reverse
class BlogTag(models.Model):
tag_name = models.CharField(
'Tag',
max_length=50,
help_text="Every key concept must be not longer then 50 characters",
unique=True,
)
slug_tag = models.SlugField(
'Slug',
unique=True,
help_text="Slug is a field in autocomplete mode, but if you want you can modify its contents",
)
def __str__(self):
return self.tag_name
def get_absolute_url(self):
return reverse("single_blogtag", kwargs={"slug_tag": self.slug_tag})
class Meta:
ordering = ['tag_name']
urls.py
path("tags/", views.listTagAdmin, name='tag_list_admin'),
path("create-tag/", views.createBlogTag, name='create_tag'),
path("update-tag/<str:slug_tag>/", views.updateBlogTag, name='update_tag'),
path("delete-tag/<str:slug_tag>/", views.deleteBlogTag, name='delete_tag'),
tag_list.html
<table class="table table-striped">
<thead class="bg-secondary text-white">
<tr>
<th colspan="3"><h1 class="text-center"><strong>Tag List</strong></h1></th>
</tr>
<tr>
<th colspan="1">Tag</th>
<th colspan="1">Related Posts</th>
<th class="text-center" colspan="1">Actions</th>
</tr>
</thead>
<tbody>
{% for tag in tag_list %}
<tr>
<td colspan="1">{{ tag.tag_name }}</td>
<td colspan="1">{{ tag.tag_blogpost.count }}</td>
<td colspan="1">
<div class="row justify-content-md-center">
<a class="btn btn-success btn-sm mx-1" href="{% url 'update_tag' slug_tag=tag.slug_tag %}">Update</a>
<button class="btn btn-danger btn-sm mx-1" type="button" data-toggle="modal" data-target="#deleteModal">Delete</button>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center" id="deleteModalLabel">Delete Request</h2>
</div>
<div class="modal-body">
<h3>Are you sure to delete this tag?</h3>
<h1 class="py-4"><em><strong>{{ tag.tag_name }}</strong></em></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">No, don't do this</button>
<form action="{% url 'delete_tag' slug_tag=tag.slug_tag %}" method="POST">
{% csrf_token %}
<button class="btn btn-danger btn-sm" type="submit" name="button">Yes, delete it</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
The problem is that it's not possible to delete every single objects of the list but only the first object. Even if I try to delete the last object I delete the first object instead of the last.
Where I've wrong?
All your modal forms are named the same, hence it will pick one. If it searches for a specific id, it will pick one. In order to solve this, you should give your modals different ids:
<tbody>
{% for tag in tag_list %}
<tr>
<td colspan="1">{{ tag.tag_name }}</td>
<td colspan="1">{{ tag.tag_blogpost.count }}</td>
<td colspan="1">
<div class="row justify-content-md-center">
<a class="btn btn-success btn-sm mx-1" href="{% url 'update_tag' slug_tag=tag.slug_tag %}">Update</a>
<button data-target="#deleteModal{{ tag.pk }}" class="btn btn-danger btn-sm mx-1" type="button" data-toggle="modal">Delete</button>
<div class="modal fade" id="deleteModal{{ tag.pk }}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center" id="deleteModalLabel">Delete Request</h2>
</div>
<div class="modal-body">
<h3>Are you sure to delete this tag?</h3>
<h1 class="py-4"><em><strong>{{ tag.tag_name }}</strong></em></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">No, don't do this</button>
<form action="{% url 'delete_tag' slug_tag=tag.slug_tag %}" method="POST">
{% csrf_token %}
<button class="btn btn-danger btn-sm" type="submit" name="button">Yes, delete it</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
So here we added a suffix to the id of the <div class="modal fade" id="deleteModal{{ tag.pk }}" ...>, and used the same id in the <button target="#deleteModal{{ tag.pk }}" ...>.
I need your help with my flask blog app.
I made a simple dashboard listing all the posts, admin can edit or delete any of them. Edit option is fine. But, for delete option, I am trying to implement a confirmation step using a modal. My code is below.
{% 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">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Deleting Post </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this post?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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 %}
Issue: Form action is generating same url (/delete_article/1) for all posts.
Please help.
Regards Hossain
The problem was for the reuse of modal id. As the modal code in the loop, so modals for all the post were having the same id. That's why view function was getting the same URL.
Solution (three changes in the above code):
data-target="#exampleModalCenter" -- > data-target="#exampleModalCenter{{article.id}}"
id="exampleModalCenter" --> id="exampleModalCenter{{article.id}}"
and
id="exampleModalLongTitle" --> id="exampleModalLongTitle{{article.id}}"
Create an element to select the product to be deleted in layout.html
<div id="dvtextRemoveDiv" style="display: none">
<p class="pintitle"> Select a product name to be deleted from the dropdown: </p>
<table border="0" width="1000">
<tr>
<td>
<p class="pinfield"><select name="KeyValuesRemove" id="KeyValuesRemove" class="form-control" onchange="passKeyToBeDeleted()">
{% for row in KeyValuesRemove %}
<option value="{{row}}">{{row}}</option>
{% endfor %}
</select>
</p>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
</tr>
</table>
</div>
Create a modal in the same page
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete Post?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('delete_post')}}" method="POST">
<input name="pass_value" type="hidden" value="pass_value" id="hidden_input">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
</div>
</div>
</div>
</div>
Javascript function to pass value from html file to views.py (from frontend to backend)
<script>
function passKeyToBeDeleted(){
var valuefromID = document.getElementById('KeyValuesRemove').value;
$('#hidden_input').val(valuefromID);
alert(document.getElementById('hidden_input').value);
$("#deleteModal").modal("show");
}
</script>
I have the following situation: At the user's area on the website he can see all his real estate posts in a table. There is a "trash button" for each one of the posts. When he press the button I want do delete from DB the exact instance he choose.
This is the HTML that I have. Please note that I used an to use a view to access the DB and then delete from DB. But I don't know how to send the exactly parameters to find it on the DB.
<div class="container">
<div class="col-xs-12">
<h1>Olá, {{ request.user.first_name }}</h1>
</div>
<div class="row col-md-12 col-md-offset-0 custyle">
<table class="table table-striped custab">
<thead>
<tr>
<th>Imagem Principal</th>
<th>Data Criação</th>
<th>Tipo do Anúncio</th>
<th>Tipo do Imóvel</th>
<th>Preço Venda</th>
<th>Visualizações</th>
<th>Expira</th>
<th>Status</th>
<th class="text-center">Action</th>
</tr>
</thead>
{% for anuncio in anuncios %}
<tr >
<td>
<div class="embed-responsive embed-responsive-16by9">
<img class="embed-responsive-item" src="{{anuncio.imagem_principal.url}}">
</div>
</td>
<td>Falta</td>
<td>{{anuncio.tipo_anuncio}}</td>
<td>{{anuncio.tipo_imovel}}</td>
<td>R$ {{anuncio.preco_venda}}</td>
<td>Falta</td>
<td>News Cate</td>
<td>News Cate</td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
<span class="glyphicon glyphicon-trash"></span>
</button></p>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad">
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer form-actions">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
<button type="submit" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I am practing what I learnt in a book, so I don't want to go for AJAX yet.
Make the button inside of a <form> that POSTs to a view, which will then delete the instance. For example:
html
<form action="{% url 'delete_estate %}" method="POST">
{% csrf_token %}
<input type="hidden" name="estate_id" value="{{ estate.id }}">
</form>
view
def delete_estate(request):
if request.method == "POST":
estate_id = request.POST['estate_id']
estate = Estate.objects.get(id=estate_id)
estate.delete()
messages.success(request, "Estate deleted successfully!")
return redirect("/")
urls
...
url(r'^delete-estate/$', views.delete_estate.as_view(), name='delete_estate'),
....
Put the modal inside of the for loop as well so that there is a distinct modal for every estate. Remember to change the id of the modal to something like id="delete_{{ anuncio.id }}" and have the delete button activate that same modal using data-target="delete_{{ anuncio.id }}". From within that modal you should be able to do what Hybrid said with the form and access the {{ anuncio.id }} variable.
If you didn't already know, id is already created by default.
I have a for loop on my html code to display a list of data, when I made a Bootstrap Modal in this loop to display it for each element of the list. It seems that the modal work only for the first element of the list.
{% for i in lb %}
<button class="btn" id="myBtn" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajouter Serveur</h4>
</div>
<div class="modal-body">
<form method="post" class="loginForm">
<input type="hidden" name="lb" value="{{ i.Nom }}">
<h6>{% csrf_token %}
{{ form.as_table }}</h6>
<input type="submit" name="submit" class="btn btn-primary " value="Submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div></div>
{% endfor %}
The id value of the button and <div class="modal"> have to be unique in the document.
Try adding a unique value to the id, ie:
<div class="span12">
{% for i in lb %}
<div id="Person-1" class="box">
<div class="box-header">
<div class="span10">
<i class="icon-hdd icon-large"></i>
<h5>{{i.Nom}}</h5></div>
<button class="btn" id="myBtn{{i.id}}" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal{{ i.id }}"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
<div class="modal fade" id="myModal{{ i.id }}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajouter Serveur</h4>
</div>
<div class="modal-body">
<form method="post" class="loginForm">
<input type="hidden" name="lb" value="{{ i.Nom }}">
<h6>{% csrf_token %}
{{ form.as_table }}</h6>
<input type="submit" name="submit" class="btn btn-primary " value="Submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div></div>
</div>
<div class="box-content box-table">
<table class="table table-hover tablesorter">
<thead>
<tr>
<th>Nom</th>
<th>Adresse</th>
<th>Etat</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% for j in s %}
{% if i.Nom == j.LB %}
<tr>
<td>{{ j.Nom }}</td>
<td>{{ j.Adresse }}</td>
{% if j.Etat == m %}
<td>Désactiver</td>
{% else %}
<td>Activer</td>
{% endif %}
<td><a>Edit</a></td>
<td>Supprimer</td>
{% if j.Etat == m %}
<td class="icon-ok-circle icon-large" style="color : green" title="Activé"></td>
{% else %}
<td class="icon-remove-circle icon-large" style="color : red" title="Désactivé"></td>
{% endif %}
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
var a = "{{ i.id }}"
$(document).ready(function(){
$("#myBtn"+a).click(function(){
$("#myModal"+a).modal({show:true});
});
});
</script>
{% endfor %}
</div>
In HTML id have unique identification. So we use unique id in every modal
{% for l in lamp %}
<h6>change in button</h6>
<button data-target="#mymodal{{l.id}}"</button>
<h6>change in modal id </h6>
<div class="modal" id="mymodal{{l.id}}"</div>
{% endfor %}