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.

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');
}
});
});

Stop Django modal from redirecting to a new page

I am trying to implement an edit form by using a modal(pop out window for editing).
I have a list of items and each item has an edit link next to it. The form that pops out will be populated by the objects id.
The problem I am having is that when I click on "Edit", a new page opens but I want a modal window to open up on the same page.
Another problem I am having is that the Cancel and X buttons do not work yet my Submit button does work. Any ideas on how to resolve this issue is greatly appreciated.
detail.html(the list of items)
<h1>{{ inventory.id }} {{ inventory.inventory_name }} created on {{ inventory.pub_date }}</h1>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<table cellpadding="1" cellspacing="1" id="detailTable" class="table table-striped table-bordered">
<thead>
<th>ID</th>
<th>NAME</th>
<th>STATUS</th>
<th>DERIVATIVES</th>
<th>SUBSYSTEMS</th>
<th>TIME ADDED</th>
<th>TIME EDITED</th>
<th>EDIT</th>
</thead>
<tbody>{% for block in inventory.block_set.all %}
<tr>
<td>{{ block.id }}</td>
<td>{{ block.block_name }}</td>
<td>{{ block.block_status }}</td>
<td>{{ block.block_derivatives }}</td>
<td>{{ block.block_subsystems }}</td>
<td>{{ block.added }}</td>
<td>{{ block.updated }}</td>
**<!-- LINK TO THE EDIT FORM MODAL -->**
**<td><a class="fa fa-pencil" data-toggle="modal" href="/inventory/{{ inventory.id }}/editblock/{{ block.id }}/" data-target="#modal" title="edit item" data-tooltip>Edit</a>
</td>**
**<!-- LINK TO THE EDIT FORM MODAL -->**
</tr>{% endfor %}</tbody>
</table>{% if user.is_authenticated and user.is_active %}
<div display="inline">
<p>Make a request: Request Form
</p>{% else %}
<div display="inline">
<p>You must be authorized to make a request.</p>
<form id="login_form" method="post" action="" autocomplete="off">{% csrf_token %}
<input style="display:none;" type="text" name="somefakename" />
<input style="display:none;" type="password" name="anotherfakename" />
<input type="text" name="username" value="" size="50" placeholder="Username" />
<br />
<input id="passwrd" type="password" name="password" value="" size="50" placeholder="Password" />
<br />
<input id='login' type="submit" value="login" />
<p style="display:inline; padding:10px"></p>
</form>
{% endif %}
</div>
editForm.html:
{% load staticfiles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="{% static " inventory/js/googleAPIJquery.js " %}" type="text/javascript"></script>
<div class="modal-dialog modal-md">
<div class="modal-content">
<form id="block_update_form" method='post' class="form" role="form" action='.'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Block {{ block.id }}</h4>
</div>
<div class="modal-body">{% csrf_token %} {{ form.non_field_errors }}
<div class="form-group">{% for field in form %}
<div class="form-group">{% if field.errors %}
<ul class="form-errors">{% for error in field.errors %}
<li><span class="fa fa-exclamation-triangle"></span> <strong>{{ error|escape }}</strong>
</li>{% endfor %}</ul>{% endif %} {{ field.label_tag }} {{ field }} {% if field.help_text %}
<div class="form-helptext">{{ field.help_text }}</div>{% endif %}</div>{% endfor %}</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
<input type="submit" class="btn btn-primary" value="save" style="margin-bottom: 5px;" />
</div>
</form>
<script>
jQuery('.modal-content .calendar').datepicker({
dateFormat: "yy-mm-dd"
});
var form_options = {
target: '#modal',
success: function() {}
}
$('#block_update_form').ajaxForm(form_options);
</script>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

<td><a class="fa fa-pencil" data-toggle="modal" href="/inventory/{{ inventory.id }}/editblock/{{ block.id }}/" data-target="#modal" title="edit item" data-tooltip>Edit</a>
</td>
<div class="modal-dialog modal-md">
<div class="modal-content">
{% include 'editForm.html' with form=form %}
</div>
</div>

for your html:
http://getbootstrap.com/javascript/#modals
and:
{% include 'editForm.html' with form=form, any_parameters = any_parameters %}
example:
views.py:
context['form'] = CommentForm(request.POST or None)
in main.html:
{% include 'area/comment-form.html' with form=form %}
in comment-form.html:
<form method="post" class="form-horizontal" action='{% url 'add-comment' id=platform.id %}'>

Onclick does not work using Bootstrap

I have worked with Django and Bootstrap, and I have a problem with onclick attribute. When I click on a button, it does not show me nothing. Here are the HTML:
{% extends 'base_profile.html' %}
{% block profile %}
<br />
<div id="content">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="fb-profile">
<img id='background_picture' align="left" class="fb-image-lg" src="https://s-media-cache-ak0.pinimg.com/originals/ad/38/bd/ad38bd348826054d3fd5e940950b1124.jpg" alt="Profile image example"/>
{% load staticfiles %}
<img id='profile_picture' align="left" class="fb-image-profile thumbnail" src="{% static 'media/{{path}}' %}" alt="media/{{path}}"/>
<!-- 200 x 200 -->
<div class="fb-profile-text">
{{ user.first_name }} {{ user.last_name }}
<div id="wrap">
<p>
<ul class="nav nav-tabs">
<li role="presentation" class="active">My profile</li>
<li role="presentation">Fallowers</li>
<li role="presentation">Fallowing</li>
<li role="presentation">Logout</li>
<li role="presentation">
<button id="compose" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Compose Twitt
</button> </li>
</ul>
</p>
<p>{{ user_profile.moto }}</p>
{% for twitt in all_twitters reversed %}
<hr>
<div class="media">
<div class="media-left media-middle">
<a href="#">
{% load staticfiles %}
<img class="media-object" src="{% static 'twittapp/images/logo_profile.png' %}" alt="Some picture">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ user.first_name }} {{ user.last_name }}</h4>
{{ twitt.content }}
</div>
</div>
<hr>
<span class="glyphicon glyphicon-trash"></span> Delete
<span class="glyphicon glyphicon-comment"></span> Comment
<span class="glyphicon glyphicon-eye-open"></span> See the comments
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- 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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Compose Twitt</h4>
</div>
<form action="/profile/compose/" method="post">{% csrf_token %}
<div class="modal-body">
<textarea style="resize:none" class="form-control" rows="3" cols="20" name="twitt_content" id="textarea"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save_twitt" type="submit" class="btn btn-primary">Twitt</button>
</div>
<p id="left_chars">sdks</p>
</form>
</div>
</div>
</div>
{% endblock profile %}
Here is a function located in the external js file:
function deleteTwitt(){
$.post('/delete', {twitt_id: '{{ twitt.id }}'});
};

First make sure you have embedded external js file using script tag in current page and if it is not then please embed it and check. If file is embedded then just change following in your HTML code
<span class="glyphicon glyphicon-trash"></span> Delete
Here I just removed "javascript:void(0)" from href of anchor tag. Still if it's does not work then let me know.