Develop Reference

Bootstrap modal doesn't display images that were uploaded in django

hello I have a problem to show several images that are in my database when calling the modal, they just show up one of them from my gallery. I have found little information about it and what I have found seems very difficult to follow. Can you help me explain how it would be to show the images that are in my database through my modal?
The images are loading well in the database, the only problem is displaying all the images when I click to call my modal
HTML
{% for carro in carros %}
<tr>
<td>{{carro.fecha_registros}}</td>
{% if carro.fotosCarro %}
</td>
<a data-bs-toggle="modal" data-bs-target="#exampleModal{{ forloop.counter }}">
<img src="{{carro.fotosCarro.url}}" height="68">
</a>
</td>
{% endif %}
<td>{{carro.placas}}</td>
<td>{{carro.año}}</td>
<td>{{carro.modelo}}</td>
<td>{{carro.color}}</td>
<td>{{carro.cliente.nombre}}</td>
</tr>
{% endfor %}
modal
{% for carro in carros %}
<div class="modal fade" id="exampleModal{{ forloop.counter }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<!-- <h5 class="modal-title" id="exampleModalLabel"></h5> -->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="table-responsive">
<div class="row">
<div class="col-lg-12">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/fotos/{{carro.fotosCarro}}" height="68"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- end row -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
JS
<script>
$('#exampleModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
views.py
def list_cars(request):
if request.method == 'POST':
fromdate=request.POST.get('fromdate')
todate = request.POST.get('todate')
searchresult = Carro.objects.filter(fecha_registros__range=(fromdate, todate))
return render(request,'carros/index.html',{'carros':searchresult})
else:
displaydata = Carro.objects.all()
return render(request, 'carros/index.html', {'carros': displaydata})

Datatable button aiming to different Modal with javascript

It is a table display in webpage, it displays one button for row using Datatable.
In the column #4 displays either of 2 values, one is --- which is desires for trigger any of the two Modals after click over it own row's button.
When click over any row's button, console.log successfully display message set, however it does not open any modal and display error document.getElementById(...).modal is not a function at HTMLButtonElement.<anonymous>
Table header is ['eamil', 'first-name', 'last-name', 'NIT', 'button']
data value for table is:
[['prueba1#gmail.com','Daniel','Apellido01','907595-0'],
['prueba4#gmail.com','Prueba04','Apellido04','---']]
HTML
<!-- DataTable -->
<table id="listados" class="display nowrap responsive" style="width:100%">
<thead>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for i in evnts %}
<tr>
<td class="text-dark">{{ i[0] }}</td>
<td class="text-dark">{{ i[1] }}</td>
<td class="text-dark">{{ i[2] }}</td>
{% if i[3] != '---' %}
<td class="text-dark">{{ i[3] }}</td>
{% else %}
<td class="text-dark">{{ i[3] }}</td>
{% endif %}
<td></td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</tfoot>
</table>
<!-- Modals -->
<div class="modal fade" id="newNit" tabindex="-1" role="dialog" aria-labelledby="newNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newNitModalLabel">Agregar Nuevo NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="nuevo"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="actualizarNit" tabindex="-1" role="dialog" aria-labelledby="actualizarNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="actualizarNitModalLabel">Actualizar informacion NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="update"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
snippet for Datatable and modals
$(document).ready( function () {
var pasarValor;
var table = $('#listados').DataTable({
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button class='btn-success' data-toggle='modal' id='agregarNit'>NIT</button>"
}
],
"scrollX":true,
})
$('#listados #agregarNit').on('click', function() {
var data = table.row( $(this).parents('tr') ).data();
pasarValor = {
mail: data[0],
nit: data[3]
};
if (data[3] === '---'){
console.log('True')
document.getElementById('newNit').modal('show');
} else {
console.log('False')
document.getElementById('actualizarNit').modal('show');
}
});
});

Input value from HTML not passing to modal

I am trying to pass the reservation id from HTML to modal. In pictures, when I click "cancel" next to reservation:
preview of the screen A modal appears and it should contain the id number of reservation:
preview
Modal pops up but without the reservation id number. Please, what's wrong?
I followed this tutorial: https://www.geeksforgeeks.org/how-to-pass-data-into-a-bootstrap-modal/. Thank you.
Here is my code:
{% extends "layout.html" %}
{% block title %}
Index
{% endblock %}
{% block main %}
<p>
<h3>Welcome {{ firstname }}</h3>
</p>
<table class="table table-striped">
<thead>
<tr>
<th>Seat</th>
<th>Start date</th>
<th>End date</th>
<th>Number of days</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for histor in history %}
<tr>
<td>{{ histor.seat_name }}</td>
<td>{{ histor.start_date}}</td>
<td>{{ histor.end_date }}</td>
<td>{{ numberofdays }}</td>
<td>
<form action="/" method="post">
<input tupe="text" class="form-control" id="idtocancel" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }}>
<button type="button" id="submit" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel {{ histor.booking_id}}</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- 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">Do you really wish to cancel this booking?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 id="modal_body"></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>
<input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
<button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
</div>
</div>
</div>
</div>
<!--JavaScript queries-->
<script type="text/javascript">
$("#submit").click(function () {
var name = $("#idtocancel").val();
$("#modal_body").html( name);
});
</script>
{% endblock %}

You are assigning value of {{ histor.booking_id }} to placeholder instead use value="{{ histor.booking_id }}" .Then , use class for click event and inside this get value of input using $(this).prev().val() and put it inside your modal.
Demo Code :
$(".tocancel").click(function() {
var name = $(this).prev().val(); //use prev
$("#modal_body").html(name);
$("#bookId").val(name); //use val here
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Seat</th>
<th>Start date</th>
<th>End date</th>
<th>Number of days</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>2-10-1</td>
<td>10-1-10</td>
<td>5</td>
<td>
<form action="/" method="post">
<!--added value="{{ histor.booking_id }}"-->
<input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="1">
<button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 1</button>
</form>
</td>
</tr>
<tr>
<td>B</td>
<td>2-10-1</td>
<td>10-1-11</td>
<td>5</td>
<td>
<form action="/" method="post">
<input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="2">
<button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 2</button>
</form>
</td>
</tr>
</tbody>
</table>
<!-- 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">Do you really wish to cancel this booking?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 id="modal_body"></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>
<input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
<button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
</div>
</div>
</div>
</div>

Flask/Bootstrap button not opening modal window and without error message

I have this management page that lists my employees from my sqlite database, but when I click Add New Employees, nothing happens, and I don't get an error message as well...
I went over Bootstrap5 documentation to make sure I didn't misspell anything but still stuck...
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class "col md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<!-- Modal Edit Employee-->
</div>
</div>
</div>
{% endblock %}

on the Manage Employees button you are setting data-bs-toggle and data-bs-target, which should be data-toggle and data-target. Besides that you have to specify your target in data-target, you are defining a modal that doesn't exist (#mymodal doesn't exist in your code, that's why nothing happens).
Here is a working sample with your code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-toggle="modal" data-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<div class="modal fade" id="mymodal" 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">Add new Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Create your html form here ...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add New Employee</button>
</div>
</div>
</div>
</div>
<!-- Modal Edit Employee-->
<div class="modal fade" id="modaledit{{row.id}}" 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="exampleModalLongTitle2">Modal Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Edit Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Edit Employee</button>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
By the way, you have an error on your code after your class row, you have class "col md-12" which should be class="col-md-12". (missing the equals and hyphen sign).
More information about modals can be found here: https://getbootstrap.com/docs/4.0/components/modal/
Hope it helps! :)

I did solved it by placing the Add New Employee model code just below the Add New Employee button code...

reset/refresh modal data on each click event

Okay so I am trying to have a table displaying results from a query. I want the data in the table to be truncated and the user to be able to see the full data in a modal.
I have tried implementing this as seen below. However, the modal is displaying the same result in every column for the first row. It seems as though once the modal takes data it won't change dynamically on iteration to load new data.
So my question is what is the best way to handle this type of dynamic request and how would I implement it? Should I try to dynamically load the data with an ajax request or is there a way to reset that modal on each click to load new data?
Please see the code below and thanks!
Template:
<td class='test'>{{ value.4 }}<img src='{% static "img/expand-icon2.png" %}' id="expand">
{% if methods %}
{% for key2, value in methods %}{% ifequal key2 key %}
<div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="classModalLabel">
Triples:
</h4>
</div>
<div class="modal-body">
<table id="classTable" class="table table-bordered">
<thead>
<tr>
<th style="width: 4%">#</th>
<th>Subject</th>
<th>Predicate</th>
<th>Object</th>
<tr>
</thead>
<tbody>
{% for item in value %}
<tr>
<td scope="row">{{ forloop.counter }}.</td>
<td>{{ item }}</td>
<td>{{ item }}</td>
<td>{{ item }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
{% endifequal %}
{% endfor %}
{% endif %}
</td>
{% else %}
<td>No Provenance Terms Found</td>
{% endif %}
Javascript:
<script type="text/javascript">
$('.test').each(function(){
var trig = '[id^="trigger_"]';
$(trig).click(function(){
$('#classModal').modal('show');
return false;
})
});
</script>

you can use this jquery for reloading the modal. here you can use .modal-body1 class to reset the exact data field. you can use any class names.
insert this code on your click function.
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("");
});
});