Develop Reference

Trigger events only when Bootstrap modal is shown

I have a webpage (Flask powered) that loads lots of modals by using a loop:
{% for _, product in products_table.items() %}
<div class="modal fade" tabindex="-1" id="modal-{{product.CODIGO}}" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ product.PRODUTO }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table" id="product-detail">
<thead>
<tr>
<th scope="col">Loja</th>
<th scope="col">Estoque</th>
</tr>
</thead>
<tbody>
{% for store in toy_store_list %}
<tr id="tr-{{ store.alias }}">
<td>{{ store.name }}</td>
<td><span style='font-weight: bold' hx-trigger="load target:#modal-{{product.CODIGO}}" hx-get="{{ url_for('product.get_product_stock', store=store.alias, search_term=product.CODIGO) }}"
hx-swap="innerHTML" hx-target="this">
<div class="spinner-border spinner-border-sm htmx-indicator" role="status"></div>
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endfor %}
I want HTMX to only make the GET request when ONE bootstrap modal is launched (clicked). Currently, when the page loads, it is making one request for each modal in page.
I tried using hx-trigger="load target:#modal-{{product.CODIGO}} without any good results.

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...

how to have dynamic modal in datatable

{% for key,value in config.items %}
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-id={{ key }} data-target="#myModal"><i class="glyphicon glyphicon-pencil" aria-hidden="true"></i></button>{{key}}
</td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" id= {{ forloop.counter }>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Version for <strong>{{key}}</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder={{key}} {{ forloop.counter }}>
{{ forloop.counter }}
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok-sign"></span> Accept</button>
<button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span> Reject</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
{% endfor %}
//I have a datatable where the rows are getting populated based on the loop values.
Now inside the datatable in one particular row I have a button upon clicking it I should display the values of the particular row.
But the problem I am facing is only the first value is getting displayed in the modal.
when I am trying to check through {{ forloop.counter }} The value is always 1 inside the modal.But if i check outside the modal it is incrementing.
Can anyone guide me

How to pass value from checkbox to field formset in django

I make a button inside a table Product. When I click on the button will display popup table for user choose items by checkbox. I'm using formset to make row in table. But my button to insert items to table Product is not working.
Popup table for choose items:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
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">Search Product</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-lg-12">
<div class="col-lg-10"><input type="text" class="form-control" id="search"
name="txtSearch"
placeholder="Search"></div>
<div class="col-lg-2">
<button type="button" class="btn start" id="btnSearch" name="btnSearch">
<i class="fa fa-search" aria-hidden="true"></i>
<span></span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel-body">
<div class="adv-table">
<table id="tblData"
class="display table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Supplier</th>
<th>Sale Code</th>
<th>Purchase Code</th>
<th></th>
</tr>
</thead>
{% if supplier_item %}
<tbody>
{% for i in supplier_item %}
<tr class="gradeX">
<td>{{ i.item.name }}</td>
<td>{{ i.supplier.name }}</td>
<td>{{ i.price }}</td>
<td>{{ i.quantity }}</td>
<td><input type="checkbox" name="choices"
id="{{ i.item.id }}"
value="{{ i.item.name }}">
</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success" type="button" id="btnAddItems">Save changes</button>
</div>
</div>
</div>
</div>
jQuery:
$(document).ready(function () {
$('input[type=checkbox]').click(function () {
if ($(this).is(':checked'))
$(this).attr('checked', 'checked');
else
$(this).removeAttr('checked');
});
$('#btnAddItems').on('click', function () {
debugger;
var allVals = [];
$('input[checked=checked]').each(function () {
allVals.push($(this).val());
})
return allVals;
cloneMore('#dynamic-table tr.gradeX:last', 'form', allVals);
function cloneMore(selector, type, allVals) {
for (i = 0; i < allVals.length; i++) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function () {
var name = $(this).attr('name').replace('-' + (total - 1) + '-', '-' + total + '-');
var id = 'id_' + name;
var value = allVals[i];
$(this).attr({'name': name, 'id': id, 'value': value}).val('').removeAttr('checked');
});
newElement.find('label').each(function () {
var newFor = $(this).attr('for').replace('-' + (total - 1) + '-', '-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
};
});
});