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

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

Problem with modal window in Ajax & Django

I am trying to make my modal window in my first Django project (I don't know JS and I started in Django) and I put a JS function on my modal window click.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function () {
$(".js-create-articles").click(function () {
$.ajax({
url: '/articles/create/',
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-articles").modal("show");
},
success: function (data) {
$("#modal-articles .modal-content").html(data.html_form);
}
});
});
});
class MainArticles(ListView):
template_name = 'dishes/articles.html'
model = Articles
class MainArticlesCreate(View):
def get(self, request):
form = ArticlesForm()
context = {'form': form}
html_form = render_to_string('dishes/articles_create.html',
context,
request=request,
)
return JsonResponse({'html_form': html_form})
class ArticlesForm(forms.ModelForm):
model = Articles
fields = {'name', 'tag', 'deception'}
class Articles(models.Model):
name = models.CharField(max_length=100)
tag = models.CharField(max_length=20, null=True, blank=True)
deception = models.TextField(max_length=800)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% extends 'main.html' %}
{% load static %}
{% block javascript %}
<script src="{% static 'js/articles.js' %}"></script>
{% endblock %}
{% block content %}
<section class="feature">
<div class="col-md-9">
<h2 class="section-header">Товары в корзине</h2>
<div class="table-responsive">
<p>
<button type="button" class="btn btn-primary js-create-articles">
<span class="glyphicon glyphicon-plus"></span>
New article
</button>
</p>
<table class="table">
<tr class="info">
<td class="info col-md-3">Товар</td>
</tr>
{% for obj in object_list %}
<tr>
<td class="info col-md-3">{{ obj.name }}</td>
<td class="info col-md-3">{{ obj.deception }}</td>
<td class="info col-md-3">
<button>edit</button>
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="text-center bg-warning">No book</td>
</tr>
{% endfor %}
</table>
<p>NAZAAAAAD </p>
</div>
<!-- THE MODAL -->
<div class="modal fade" id="modal-articles">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
</div>
</section>
{% endblock content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% load widget_tweaks %}
<form method="post">
{% csrf_token %}
<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">Create a new articles</h4>
</div>
<div class="modal-body">
{% for field in form %}
<div class="form-group{% if field.errors %} has-error{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class="form-control" %}
{% for error in field.errors %}
<p class="help-block">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create book</button>
</div>
</form>
Clicking on the button works, I checked the alert but the window does not work or if it works, I just don’t see it. What am I missing?

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.