Develop Reference

Flask flash - use bootstrap toast

I am using Boostrap-Flask (not Flask-Bootstrap) with Bootstrap 5.
When I save a form I can use Flash to display an alert using the Bootstrap-Flask macro render_messages
This works fine. However, I'd like to use a Toast rather than an Alert.
I tried doing this via Javascript rather than using flash. This triggers when I hit the submit button. But the toast flashes very fast due to the Flask page reloading on save, I only actually see it if I put an alert("saved") before it in my javascript which delays the page reload just long enough to see the toast flash up. So it is displaying but vanishes immediately on the page refresh. I don't understand why an alert can be sent and displayed but a toast cannot.
function validateForm() {
let toastAlert = document.getElementById('toastAlert');
let toastBody = document.getElementById('toastBody');
let toasticon = document.getElementById('toasticon');
let requested_by = document.forms["form"]["requested_by"].value;
option = {"autohide": false};
toasticon.classList = "h4 bi bi-check2-circle align-middle";
toastAlert.classList = "toast align-items-center text-white bg-success border";
toastBody.innerHTML = " Ticket Saved!";
let toast = new bootstrap.Toast(toastAlert, option);
toast.show();
return true;
};
I have also tried this in my html page:
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Message</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
{{ message }}
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endwith %}
as per this SO answer Is there a way to use Bootstrap toast in Flask flashing natively?
But it does not work.
Is this possible?

I got this working by putting the following code into an HTML file and importing this into my base.html
<!-- Begin alerts -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<script>
option = {"autohide": true, timeout:1500};
toastAlert.classList = "toast align-items-center text-white bg-{{category}} border";
toasticon.classList = "toast-icon-{{category}}"; <!-- defined in styles.css -->
toastBody.innerHTML = "{{ message }}";
let toast = new bootstrap.Toast(toastAlert, option);
toast.show();
</script>
{% endfor %}
{% endif %}
{% endwith %}
<!-- End alerts -->
I also have this in a separate HTML file that I import in my base.html
<!-- Toast Notification t-->
<div id="toast-pos" class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1099">
<div id="toastAlert" class="toast align-items-center text-white bg-danger border" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<div class="hstack gap-3">
<span id="toasticon" class="toast-icon-danger"></span>
<span id="toastBody" class="ms-auto h5 text-center align-middle" >Hello, world! This is a toast message.</span>
</div>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
I created some css to change the icons depending on the Flash category:
.toast-icon-success::before {
font-size: 3rem;
content: "\F26A";
font-family: 'bootstrap-icons';
}
.toast-icon-danger::before {
font-size: 3rem;
content: "\F336";
font-family: 'bootstrap-icons';
}
.toast-icon-info::before {
font-size: 3rem;
content: "\F332";
font-family: 'bootstrap-icons';
}
.toast-icon-warning {
font-size: 3rem;
content: "\F33A";
font-family: 'bootstrap-icons';
}
I can now Flash messages from Flask and they are displayed as Bootstrap toasts.

Django parsing values of fields in models - Extracting pk

I'm completely lost on part of my Django website. I finally figured out a way to have the same model create a template and then use that template and create another post. This works and is ideal. Now I need to put them in different locations on the screen so I basically need two for-loops and a way to decipher the two(templates and posts off of templates) apart from each other. The model has a title and a content field. When a template is created the title always starts with "Temp: ". I'm completely lost on this because I need to parse through the model and not just use an HTML parser because the content won't already be on the page and there is more than just the title that needs to be moved. I need a way I think in the views.py file to get the pk of ALL titles that start with "Temp: " and the content field tied with it and return it in a variable to the HTML file. I have been working on this for 3 days now and I just really need help.
views.py
def docpostlistview(request):
field = DocPost.objects.all()
return render(request, 'my_app/docpost_list.html', {'field': field})
HTML
<div class="blocks">
<div class="row">
<div class="col">
TESTESTESTESTESTESTESTES
</div>
{% if user.Doc.all %}
{% for post in user.Doc.all %}
<div class="col">
<div class="card card_template hoverable">
<div class="card-image">
<a href="{% url 'use_template' pk=post.pk %}" style="color: black">
<p>
{{ post.content|safe }}
</p>
</a>
</div>
<div class="card-content">
<p>
</p>
</div>
<div class="card-action">
<div class="bottom_text">
{{ post.title }}
<div class="bottom_button">
<form action="{% url 'use_template' pk=post.pk %}" method="POST">
{% csrf_token %}
<div class="card-body">
<a style="background-color: #2f3d50; border-radius: 18px; height: 30px; position: relative; top: 5px;" href="{% url 'use_template' pk=post.pk %}" class="btn btn-primary"><div style="position: relative; top: -3px;">Create</div></a><!--use_template pk=post.pk - post-list-->
</div>
</form>
</div>
</div>
</div>
</div>
<div class="wrapper">
<ul>
<li><a class="dots_img"> <img src="{% static 'threedots.png' %}" alt=""</a>
<ul>
<div class="edit_drop">
<form action="{% url 'doc-post-update' pk=post.pk %}" method="POST">
{% csrf_token %}
<div class="card-body">
<a style="background-color: #2f3d50; border-radius: 18px;" href="{% url 'doc-post-update' pk=post.pk %}" class="btn btn-primary">EDIT</a>
</div>
</form>
</div>
<div class="delete_drop">
<a style="background-color: #2f3d50; border-radius: 18px;" href="{% url 'delete_post' pk=post.pk %}" class="btn btn-danger">Delete</a>
<!--<form action="{% url 'reset' %}" method="POST">{% csrf_token %}
<button type="submit" class="btn btn-danger">Delete</button>
</form>-->
</div>
</ul>
</li>
</ul>
</div>
</div>
{% endfor %}
<hr class="hline">
{% else %}
<div class="no_template">
<p>Your new templates will appear here!</p>
</div>
<div class="no_post">
<p>Your new documents will appear here!</p>
</div>
<hr class="hline-non">
{% endif %}
<div class="blocks2">
<div class="row">

You might be interested in field lookups which utilizes the SQL WHERE clause.
https://docs.djangoproject.com/en/3.2/ref/models/querysets/#startswith
https://docs.djangoproject.com/en/3.2/ref/models/querysets/#field-lookups
https://docs.djangoproject.com/en/3.2/topics/db/queries/#field-lookups
Sample:
doc_posts = DocPost.objects.filter(title__startswith="Temp: ")
Here, doc_posts is an iterable QuerySet object containing a sequence of DocPost objects where each item's title starts with "Temp: ".
If all you want are the id and the content fields, you may use values().
https://docs.djangoproject.com/en/3.2/ref/models/querysets/#values
Sample:
id_content_seq = DocPost.objects.filter(title__startswith="Temp: ").values("id", "content")
Here, id_content_seq is an iterable QuerySet object containing a sequence of dict objects containing id and content as keys for all items where the title starts with "Temp: ".

should django modal have a separate view?

I am working on an application that has a page with a table that is a list of users. Each user has a button which pops up a modal that does something. I am trying to create the modal that will get the user information when the button in clicked, additionally, I need in that modal some logic based on the user information and some more data. I am thinking that it makes sense to create a separate view for it but since each view must be on a different url, the concept of the modal does not makes sense (for me), because I want it to be on the same url.
Is it possible to have a modal with a different view that will have a separate logic? Since the modal is included in the template and it is basically just one template, then, can one template have 2 views?
What is the best way to implement the modal using django? And how to pass data to it, I need the data from the row that was selected + some more data from db. I have the data from the context but manipulating that using JQuery for me is a bad idea - because I am using a python session on the backend that communicates with another api, so when user clickes the modal save button, a python request needs to be done, this means I need a view for it.
Here is my try
Modal
{% block modal %}
{% load static %}
{% load authorization_tags %}
<!-- Modal -->
<div class="modal fade" id="{{modal_id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="row">
<div class="col-lg-5">
<img class="d-block w-100"
src="{% static 'app/assets/images/security-shield1.png' %}"
alt="First slide">
Use access control to deauthorize user
</div>
<div class="col-lg-7">
<h2 class="h2-responsive product-name">
<strong>{{user.real_name}}</strong>
</h2>
<h4 class="h4-responsive">
<span class="green-text">
{{user.username}}
</span>
</span>
</h4>
<div class="accordion md-accordion" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="heading2">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true"
aria-controls="collapse1">
<h5 class="mb-0">
Current Authorizations <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordion1">
<div class="card-body">
{% for right in people_rights|user_active_rights:user.id %}
{{right.room}}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="accordion md-accordion" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="heading2">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse2" aria-expanded="true"
aria-controls="collapse2">
<h5 class="mb-0">
Available Authorizations <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapse2" class="collapse show" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordion2">
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="text-center">
<button type="button" class="btn btn-lg" data-dismiss="modal"><span>Close</span></button>
<button class="btn btn-lg"><span>Authorize</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock modal %}
a piece of table and the modal included in the same template
{% include 'app/admin/users/user_authorize.html' with modal_id="authModal" user=row areas=areas rooms=rooms people_rights=people_rights %}
{%if row.empno %}
<td class="txt-oflo">{{ row.empno }}</td>
{% else %}
<td class="txt-oflo">-</td>
{% endif %}
<td>
{% with "#"|add:row.id as buttonId %}
<button id={{buttonId}} class="btn btn-lg" data-toggle="modal" data-target="#authModal">
<span>Authorize</span>
</button>
{% endwith %}
</td>
</tr>

You can try the following steps to solve the issue.
Create a separate view for the modal on a separate url.
Take the modal data out of this html file and place it in another html file. The empty modal in the original html should look something like this.
<div id="SampleTable" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">sample title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="sample_datatable">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Render that new html from the new view that was created. The ajax request that will be activated from the button that gives us the modal table might look something like this.
#app.route('/sample_data', methods=['GET', 'POST'])
def modal_table():
try:
data = request.args.get('arg')
database_data = Table.query.filter(Table.data == data).all()
result_dict = [u.__dict__ for u in database_data]
except Exception as e:
traceback.print_exc()
return render_template('modal_table.html', data=enumerate(result_dict))
The button in the original html that results in the modal table should be configured in a way using ajax requests that it renders data from the new html into the old modal data like this.
function get_sample_data() {
$.ajax({
url:"/sample_data", //the page containing python script
type: "GET", //request type,
data: {},
async:true,
beforeSend: function(){
$('#sample_datatable').html('Loading..');
},
success:function(result){
$('#sample_datatable').html(result);
}
});
}
You can call this javascript function from the button that is supposed to show the modal table.

how to display google map in between the dashboard

while running flask server throwing this error Uncaught TypeError: Cannot read property 'firstChild' of null at Object._.Og (js?key=AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U:88) at new Sg (js?key=AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U:89)
I'm new google maps in Python-Flask.google map is not showing while running the Flask localhost server.but,it showing while running the template.i'm not aware where i have mistaken in my source code. I need only show the map in between the empty place. here is the dashboard where place be the map here
yesterday i posted answer that is working.but it's showing like Uncaught TypeError: Cannot read property 'firstChild' of null at Object._.Og (js?key=AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U:88) at new Sg (js?key=AIzaSyAbZKo3h1LVhyoURgxcSUG9BGVvZtZpg0U:89) where is the problem
Here is the google map code:
{% extends "base.html" %}
{% block head %}
{{super()}}
{% endblock %}
{% block navbar %}
{{super()}}
{% endblock %}
{% block content %}
<div class="row">
<ol class="breadcrumb">
<li><a href="#">
<em class="fa fa-home"></em>
</a></li>
<li class="active">Locations>create locations</li>
</ol>
</div><!--/.row-->
<div class="row">
<div class="col-md-6">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDv8X0eEAWUtWZrHG_1XLB8gMNxgdcD0-U"></script>
<script >
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(17.3850, 78.4867),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow()
var name;
var lat;
var lng;
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
var geocoder = geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Hello World!'
});
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
name= results[1].formatted_address;
lat=e.latLng.lat();
lng=e.latLng.lng();
alert("Location: " +name + "\r\nLatitude: " + lat + "\r\nLongitude: " +lng );
document.getElementById("loc").value=name;
document.getElementById("lat").value=lat;
document.getElementById("lng").value=lng;
}
}
});
});
}
</script>
<!--<div id="dvMap" style="width: 50%; height: 50%">-->
<!--</div>-->
<form role="form" action="/post/locations" method="post" >
<input type="text" id="loc" name="name" class="form-control"/>
<input type="text" name="latitude" id="lat" class="form-control"/>
<input name="longitude" id="lng" type="text" class="form-control"/>
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</form>
</div>
</div>
<div id="dvMap" style="width: 80%; height: 70% ">
</div>
{% endblock %}
Here is the Python code:
#app.route('/page/locations')
def location():
if session['username']:
return render_template('map.html',user=session['username'])
else:
print ('login first!')
return redirect('/dashboard')

I just found the answer.Here it is my answer.
{% extends "base.html" %}
{% block head %}
{{super()}}
{% endblock %}
{% block navbar %}
{{super()}}
{% endblock %}
{% block content %}
<div class="row">
<ol class="breadcrumb">
<li><a href="#">
<em class="fa fa-home"></em>
</a></li>
<li class="active">Locations>Create Locations</li>
</ol>
</div><!--/.row id="entry.id" id="uploadbanner"-->
<div id="dvMap" style="width: 100%; height: 100%">
</div>
<form role="form" action="/post/locations" method="post">
<label>Name:</label>
<input type="text" id="loc" name="name"/>
<label>Latitude:</label>
<input type="text" name="latitude" id="lat"/>
<label>Longitude:</label>
<input name="longitude" id="lng" type="text"/>
<input type="submit" class="btn btn-primary" value=" Submit ">
<input type="reset" class="btn btn-default" value="Reset">
</form>
{% endblock %}
I just add the script in Javascript folder .
as a like <--static/assets/js/map.js --> in my template base.html source code.

The problem with your code is the javascript snippet is getting executed before the div element ( one with id="dvMap" ) is created. So either place the javascript snippet after the div element like below,
{% extends "base.html" %}
{% block head %}
{{super()}}
{% endblock %}
{% block navbar %}
{{super()}}
{% endblock %}
{% block content %}
<div class="row">
<ol class="breadcrumb">
<li><a href="#">
<em class="fa fa-home"></em>
</a></li>
<li class="active">Locations>create locations</li>
</ol>
</div>{# /.row #}
<div class="row">
<div class="col-md-6">
{# <div id="dvMap" style="width: 50%; height: 50%"></div> #}
<form role="form" action="/post/locations" method="post" >
<input type="text" id="loc" name="name" class="form-control"/>
<input type="text" name="latitude" id="lat" class="form-control"/>
<input name="longitude" id="lng" type="text" class="form-control"/>
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</form>
</div>
</div>
<div id="dvMap" style="width: 80%; height: 70% ">
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDv8X0eEAWUtWZrHG_1XLB8gMNxgdcD0-U"></script>
<script >
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(17.3850, 78.4867),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow()
var name;
var lat;
var lng;
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
var geocoder = geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Hello World!'
});
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
name= results[1].formatted_address;
lat=e.latLng.lat();
lng=e.latLng.lng();
alert("Location: " +name + "\r\nLatitude: " + lat + "\r\nLongitude: " +lng );
document.getElementById("loc").value=name;
document.getElementById("lat").value=lat;
document.getElementById("lng").value=lng;
}
}
});
});
}
</script>
{% endblock %}
Or make a separate js file ( here I have named it custom.js for an example ) in the static folder with the javascript code in it and add <script src='{{ url_for('static', filename='custom.js') }}'></script> at the end of the file.
I hope this helps you.
PS :- Please use the jinja2 comment tags while commenting in jinja2 template file. You can refer it here.

Styling an Accordion Table

I made this accordion table using bootstrap accordion. It works well, but it looks terrible. The way I have it set up is a nested accordion. the code can be seen as follows:
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- {# Load CSS and JavaScript #} -->
<!-- {# Load the tag library #} -->
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% block javascript %}
<script>
//this is not working as yet
$(document).ready(function() {
//script to refresh div - formclass is class name of form
$('#formclass2').submit(function(event){
var servername = $('#servername').val();
var divname=servername+"div";
$.ajax({
url: 'formsubmitcode',
type: 'post',
dataType:'html', //expect return data as html from server
data: $('#formclass').serialize(),
success: function(response, textStatus, jqXHR){
$('#'+divname).html(response); //select the id and put the response in the html
},
error: function(jqXHR, textStatus, errorThrown){
console.log('error(s):'+textStatus, errorThrown);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var frm = $('#myform');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'), //picks up the action from form
data: frm.serialize(),
success: function (data) {
$("#test").html(data);
$("MESSAGE-DIV").html("Something not working");
},
error: function(data) {
$("#MESSAGE-DIV").html("Something went wrong!");
}
});
ev.preventDefault();
});
});
</script>
{% endblock %}
</head>
<body>
<ul>
{% for checkkey,checkvalue in orgnizedDicts.items %}
<div class="accordion text-left" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1{{checkkey}}" href="#collapseOne{{checkkey}}">
{{checkkey}}
</a>
</div>
<div id="collapseOne{{checkkey}}" class="accordion-body collapse">
<div class="accordion-inner">
<!-- Here we insert another nested accordion -->
{% for servkey,servvalue in checkvalue.items %}
<div class="accordion" id="accordion2{{servkey}}">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2{{servkey}}" href="#collapseInnerOne{{servkey}}">
{{servkey}}
</a>
</div>
<div id="collapseInnerOne{{servkey}}" class="accordion-body collapse">
<div class="accordion-inner">
<!-- table row header -->
<table class="table table-bordered table-striped">
<tr>
<th>Servicename</th>
<th>Curent status</th>
<th>Action</th>
</tr>
{% for servicekey,servicevalue in servvalue.items %}
<tr>
<td><input type="hidden" name="servername" value="{{servkey}}">
<input type="text" name="servicename" value="{{servicekey}}"></td>
<td>{{servicevalue}}</td><!--status-->
<td><input type="submit" value="Start" name="Start">
<input type="submit" value="Stop" name="Stop">
<input type="submit" value="Restart" name="Restart"</td>
<!-- </form> -->
<!-- </div> -->
<div id="MESSAGE-DIV"></div>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
</body>
</html>
It's part of a django project so I'm using their templating language to bring in the data to populate the table and generating it dynamically. the data that I'm calling in is a nested dict nested within another dict. My table actually starts within the second nested accordion though. On the nested collapsible part of the accordion I want to do some formatting but I'm a rookie with html and css and I just want to give the outter accordion a border and make it black with white text, and give the inner accordion a border and change make thm green. I also should probably change the buttons to bootstrap buttons but I think that's pretty easy.