We Keep Coding

JS: the use of edatagrid

I have problem in using edatagrid.
The red area is a select, the yellow area is *table *by edatagrid. I want to refresh the content of the table when I change the selected value of the select.
I attempted to separate the table from the whole page. When I change the selected value, send a ajax post request to get new data. But the result was the table's style was not like before, and the content of the table was not get refreshed. Like this,
Here is my code.
The whole page: test_plan.html
{% extends 'base.html' %}
{% load static %}
{% block title %} NRLabLims - 测试管理 {% endblock %}
{#控制表格的cs操作#}
{% block css %}
<link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<link href="{% static 'css/sb-admin-2.min.css'%}" rel="stylesheet">
{% endblock %}
{% block js %}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %} "></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'js/demo/datatables-demo.js' %}"></script>
{% endblock %}
<div>
{% block content %}
<div class="container-fluid">
<!-- 页头 -->
<h1 class="h3 mb-2 text-gray-800">测试管理</h1>
<a class="mb-4">测试管理包含test plan、原始记录单、时间记录、错误记录、设备说明书、sop查询、
<!-- 测试管理 -->
{% block test_head %}
<div class="card shadow mb-4">
<div class="card-header py-3">
<div class="align-content-center" >
<h3 class="m-0 font-weight-bold text-primary" >
test plan
</h3>
<select name='testplan' class='' id="testplan" onchange="changePlan()">
{% for testplan in testplans %}
<option value="{{testplan.id}}">{{testplan.testplan_no}}</option>
{% endfor%}
</select>
<button>新增test plan表</button>
</div>
</div>
{%endblock%}
{% block testplanbody %}
<div class="card-body" id="placeHolderContent">
<table id="dg" title="测试用例"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true" resizeHandle="both" style="padding: 0 4px !important;">
<thead>
<tr>
{% for item in items %}
<th field="{{item.nickname}}" width="auto" editor="{type:'validatebox'}">{{item.name}}</th>
{% endfor %}<br>
</tr>
</thead>
</table>
<div id="toolbar">
新增一行记录
删除
保存
撤销
</div>
</div>
{% endblock %}
</div>
</div>
<!-- /.container-fluid -->
{% endblock %}
</div>
{#控制表格的js操作#}
{% block js2 %}
<script>
$(function(){
$('#dg').edatagrid({
url: 'getExcelData',
saveUrl: '/lab/test/saveTestCase',
updateUrl: 'updateTestCase',
destroyUrl: 'deleteTestCase',
});
});
//切换
function changePlan(){
testplanId=$("#testplan").find("option:selected").val();
formData={'testplanId':testplanId};
$.ajax({
type:"GET",
url:"/lab/test/plan",
dataType: "html",
data:formData,
success:function(result){
console.log('result-------');
console.log(result);
$("#placeHolderContent").html(result);
},
error: function (data) {
console.log("data2"+data);
alert("changePlan failed！");
}
});
}
</script>
{% endblock %}
The table part: test_plan_content.html
<div class="card-body" id="placeHolderContent">
<table i`d="dg" title="测试用例"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true" resizeHandle="both" style="padding: 0 4px !important;">
<thead>
<tr>
{% for item in items %}
<th field="{{item.nickname}}" width="auto" editor="{type:'validatebox'}">{{item.name}}</th>
{% endfor %}<br>
</tr>
</thead>
</table>
<div id="toolbar">
新增一行记录
删除
保存
撤销
</div>
</div>
server code:
def test_plan(request):
testplanId=request.GET.get('testplanId')
testplans=Testplan.objects.all()
if(testplanId):
# return the selected one
testplan = Testplan.objects.get(id=testplanId)
testplanId = testplan.id
items = TestplanTableItems.objects.filter(Q(type=testplan.plan_type) | Q(type=0))
return render(request, 'lab_management/test_management/test_plan_content.html',
{ 'items': items})
else:
# return last one
testplan=testplans.last()
testplanId=testplan.id
items = TestplanTableItems.objects.filter(Q(type=testplan.plan_type) | Q(type=0))
return render(request, 'lab_management/test_management/test_plan.html',
{"testplans": testplans, 'items': items})
How to solve it?

Flask server crashes after form submit using js-npm-based form field (crbug/1173575 non-JS module files deprecated)

In my current project I try to implement a datepicker. So far it works, but as I want to submit the form with my custom datepicker, my application breaks and flask is turned off with just crbug/1173575 error.
In detail it shows:
crbug/1173575, non-JS module files deprecated.
(anonym) # VM992:6772
Ofc I want to know what is the problem and how to resolve the issue, but also I would like to know how I properly add a custom Javascript/HTML5 input field to my WTForm without breaking my app. I assume, that my datepicker is not properly connected to my WTorm. Does somebody have a clue of what might be the problem or do you need some more details?
new_artist.html (Artist_Form)
{% extends 'layouts/main.html' %}
{% block title %} New Artist {% endblock %}
{% block content%}
<div class="form-wrapper">
<form method="post" class="form">
<h3 class="form-heading">List a new artist</h3>
<div class="form-group">
<label for="name">Name</label>
{{ form.name(class_ = 'form-control', autofocus = true) }}
</div>
<div class="form-group">
<label>City & State</label>
<div class="form-inline">
<div class="form-group">
{{ form.city(class_ = 'form-control', placeholder='City', autofocus =
true) }}
</div>
<div class="form-group">
{{ form.state(class_ = 'form-control', placeholder='State', autofocus
= true) }}
</div>
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
{{ form.phone(class_ = 'form-control', placeholder='xxx-xxx-xxxx',
autofocus = true) }}
</div>
<div class="form-group">
<label for="genres">Genres</label>
<small>Ctrl+Click to select multiple</small>
{{ form.genres(class_ = 'form-control', placeholder='Genres, separated by
commas', autofocus = true) }}
</div>
<div class="form-group">
<label for="facebook_link">Facebook Link</label>
{{ form.facebook_link(class_ = 'form-control', placeholder='http://',
autofocus = true) }}
</div>
<div class="form-group">
<label for="image_link">Image Link</label>
{{ form.image_link(class_ = 'form-control', placeholder='http://',
autofocus = true) }}
</div>
<div class="form-group">
<label for="website_link">Website Link</label>
{{ form.website_link(class_ = 'form-control', placeholder='http://',
autofocus = true) }}
</div>
<div class="form-group">
<label for="seeking_venue">Looking for Venues</label>
{{ form.seeking_venue(placeholder='Venue', autofocus = true) }}
</div>
<div class="form-group">
<label for="seeking_description">Seeking Description</label>
{{ form.seeking_description(class_ = 'form-control', autofocus = true) }}
</div>
<div class="form-group">
<label for="datepicker">Availabilities</label>
<input type="text" id="datepicker" name="datepicker" class="form-control", autofocus="true">
</div>
<input
type="submit"
value="Create Artist"
class="btn btn-primary btn-lg btn-block"
/>
</form>
</div>
{% endblock %}
main.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- /meta -->
<!-- styles -->
{% block stylesheets %}
<link type="text/css" rel="stylesheet" href="/static/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/static/css/layout.main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.responsive.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.quickfix.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker#1.2.0/dist/css/datepicker.min.css">
{% block stylesheets_local %}{% endblock %}
<!-- /styles -->
{% endblock %}
<!-- favicons -->
<link rel="shortcut icon" href="/static/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/static/ico/favicon.png">
<!-- /favicons -->
<!-- scripts -->
{% block javascript %}
<script src="https://kit.fontawesome.com/af77674fe5.js"></script>
<script src="/static/js/libs/modernizr-2.8.2.min.js"></script>
<script src="/static/js/libs/moment.min.js"></script>
<script type="text/javascript" src="/static/js/script.js" defer></script>
<script src="/static/dist/main.bundle.js" defer></script>
<script>console.log("This is main.html");</script>
<!-- <script type="text/javascript" src="/static/dist/main.bundle.js" defer></script> -->
{% block javascript_local %}{% endblock %}
{% endblock %}
<!--[if lt IE 9]><script src="/static/js/libs/respond-1.4.2.min.js"></script><![endif]-->
<!-- /scripts -->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">🔥</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
{% if (request.endpoint == 'venues') or
(request.endpoint == 'search_venues') or
(request.endpoint == 'show_venue') %}
<form class="search" method="post" action="/venues/search">
<input class="form-control"
type="search"
name="search_term"
placeholder="Find a venue"
aria-label="Search">
</form>
{% endif %}
{% if (request.endpoint == 'artists') or
(request.endpoint == 'search_artists') or
(request.endpoint == 'show_artist') %}
<form class="search" method="post" action="/artists/search">
<input class="form-control"
type="search"
name="search_term"
placeholder="Find an artist"
aria-label="Search">
</form>
{% endif %}
</li>
</ul>
<ul class="nav navbar-nav">
<li {% if request.endpoint == 'venues' %} class="active" {% endif %}>Venues</li>
<li {% if request.endpoint == 'artists' %} class="active" {% endif %}>Artists</li>
<li {% if request.endpoint == 'shows' %} class="active" {% endif %}>Shows</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<main id="content" role="main" class="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-block alert-info fade in">
<a class="close" data-dismiss="alert">×</a>
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
</div>
<div id="footer">
<div class="container">
<p>Fyyur © All Rights Reserved.</p>
{% block footer %}{% endblock %}
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="/static/js/libs/jquery-1.11.1.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
<script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
<script type="text/javascript" src="/static/js/plugins.js" defer></script>
</body>
</html>
package.json
{
"name": "fyyur-js",
"version": "1.0.0",
"description": "This package serves the frontend js modules needed to run js functionalities in the fyyur application",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"watch": "webpack --progress -d --config webpack.config.js --watch",
"watch-dev": "npx webpack watch --config webpack.config.js --mode development"
},
"keywords": [
"fullstack",
"template",
"python",
"flask",
"npm",
"webpack"
],
"author": "Ndrslmpk",
"license": "ISC",
"devDependencies": {
"vanillajs-datepicker": "^1.2.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}
index.js
console.log("This is the index.js file");
import Datepicker from '../node_modules/vanillajs-datepicker/js/Datepicker.js';
console.log("Datepicker", Datepicker);
const elem = document.getElementById('datepicker');
console.log("elem", elem);
const datepicker = new Datepicker(elem, {
showOnClick: true,
maxNumberOfDates: 100,
buttonClass: 'btn',
});
console.log("datepicker", datepicker);
forms.py
from datetime import date, datetime
from email.policy import default
from flask_wtf import Form
from wtforms import StringField, SelectField, SelectMultipleField, DateTimeField, BooleanField, DateField
from wtforms.validators import DataRequired, Length, URL, Regexp
class ArtistForm(Form):
name = StringField(
'name', validators=[DataRequired()]
)
city = StringField(
'city', validators=[DataRequired()]
)
state = SelectField(
'state', validators=[DataRequired()],
choices=[
('AL', 'AL'),
('WI', 'WI'),
('WY', 'WY'),
]
)
phone = StringField(
'phone', validators=[Length(min=10, max=10, message="phone number is not between %(min)d and %(max)d long"), Regexp(regex='\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{1,14}$', message="Phone number is not valid")]
)
image_link = StringField(
'image_link', validators=[URL()]
)
genres = SelectMultipleField(
'genres', validators=[DataRequired()],
choices=[
('Alternative', 'Alternative'),
('Blues', 'Blues'),
('Techno', 'Techno'),
('Other', 'Other'),
]
)
facebook_link = StringField(
'facebook_link', validators=[URL()]
)
website_link = StringField(
'website_link', validators=[URL()]
)
seeking_venue = BooleanField(
'seeking_venue',
default=False,
false_values=('False', 'false', '') )
seeking_description = StringField(
'seeking_description'
)
requirements.txt
alembic==1.7.7
Babel==2.9.0
click==8.1.2
colorama==0.4.4
dominate==2.6.0
Flask==2.1.1
Flask-Bootstrap==3.3.7.1
Flask-Datepicker==0.14
Flask-Migrate==3.1.0
Flask-Moment==0.11.0
Flask-SQLAlchemy==2.4.4
Flask-WTF==0.14.3
greenlet==1.1.2
importlib-metadata==4.11.3
itsdangerous==2.1.2
Jinja2==3.0.3
Mako==1.2.0
MarkupSafe==2.1.1
postgres==4.0
psycopg2-binary==2.9.3
psycopg2-pool==1.1
python-dateutil==2.6.0
pytz==2022.1
six==1.16.0
SQLAlchemy==1.4.35
visitor==0.1.3
Werkzeug==2.0.0
WTForms==3.0.1
zipp==3.8.0

Materialize css | js - visualization issue in the Carousel Slides

In the home page of my website there's a Materialize carousel with 3 slides.
The page is a python flask template an the Materialize carousel is injected in the page, this is the base.html template
<!DOCTYPE html>
<html class="home-bkg">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ga4MeasurementId}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '{{ga4MeasurementId}}');
</script>
{% block viewItemListAccessories %}{% endblock %}
{% block viewItemListBags %}{% endblock %}
{% block viewItemAccessory %}{% endblock %}
{% block viewItemBag %}{% endblock %}
<meta charset="utf-8" />
{% block homeTitle %}{% endblock %}
{% block bagsTitle %}{% endblock %}
{% block accessoriesTitle %}{% endblock %}
{% block reimaginedTitle %}{% endblock %}
{% block makingOfTitle %}{% endblock %}
{% block pressTitle %}{% endblock %}
{% block bagTitle %}{% endblock %}
{% block legalTitle %}{% endblock %}
<!--Import Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import Font awesome icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--Import Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Arimo&family=Playfair+Display+Lato&display=swap"
rel="stylesheet">
<!--Import main.css and materialize.css-->
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}" />
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css')}}"
media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{% block homeMeta %}{% endblock %}
{% block accessoriesMeta %}{% endblock %}
{% block reimaginedMeta %}{% endblock %}
{% block bagMeta %}{% endblock %}
{% block bagsMeta %}{% endblock %}
{% block legalMeta %}{% endblock %}
{% block makingOfMeta %}{% endblock %}
{% block pressMeta %}{% endblock %}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div>
<!-- header-menu -->
<div class="row no-margin-bottom">
<div class="header-menu valign-wrapper center-align">
<div class="col l1"></div>
<div class="col s12 m12 l3">
<!--main logo-->
<a href="/">
<img src="{{ url_for('static', filename='images/logo_black.png') }}" id="logo"
class="responsive-img" width="275" /></img>
</a>
</div>
<div class="col s12 m4 l2"><a id="bags" class="top-menu-item" href="/bags">BAGS</a></div>
<div class="col s12 m4 l2"><a id="accessries" class="top-menu-item" href="/accessories">ACCESSORIES</a>
</div>
<div class="col s12 m4 l2"><a id="lostAndFound" class="top-menu-item" href="/reimagined">REIMAGINED</a>
</div>
<div class="col l1"></div>
</div>
</div>
{% block home %}{% endblock %}
{% block bags %}{% endblock %}
{% block accessories %}{% endblock %}
{% block reimagined %}{% endblock %}
{% block makingOf %}{% endblock %}
{% block press %}{% endblock %}
{% block bag %}{% endblock %}
{% block accessory %}{% endblock %}
{% block legal %}{% endblock %}
<!-- footer -->
<div class="row">
<div class="footer valign-wrapper center-align">
<div class="col offset-s2 s8 offset-s2 m2 l1"><a id="imemoi" class="footer-item"
href="/imemoi">IMEMOI</a></div>
<div class="col offset-s2 s8 offset-s2 m2 l1"><a id="press" class="footer-item" href="/press">PRESS</a>
</div>
<div class="col offset-s2 s8 offset-s2 m4 l4 social-icons fa-lg">
<ul>
<li id="fb-icon"><a href="http://www.facebook.com/pages/imemoi/137151246299509"
target="_blank"><i class="fa fa-facebook footer-item"></i></a></li>
<li id="is-icon"><a href="http://instagram.com/imemoi_paris" target="_blank"><i
class="fa fa-instagram footer-item"></i></a></li>
<li id="pi-icon"><a href="http://pinterest.com/imemoi/" target="_blank"><i
class="fa fa-pinterest footer-item"></i></a></li>
</ul>
</div>
<div class="col offset-s2 s8 offset-s2 m4 l3"><a id="making-of" class="footer-item"
href="/making-of">MAKING OF & ENGAGEMENT</a></div>
<div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l1"><a id="legal" class="footer-item"
href="/legal">LEGAL</a></div>
<div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l2"><a id="contact-us" class="footer-item"
href="/contactUs">CONTACT US</a></div>
</div>
</div>
<div class="row">
<div class="subscribe valign-wrapper center-align">
<div class="input-field col s8 offset-m4 m4 offset-m4 offset-l4 l4 offset-l4">
<input id="subscriberEmail" type="email" class="validate"></input>
<label for="subscriberEmail">SUBSCRIBE</label>
<span class="promo">YOU'LL GET THE 15% OFF !!!</span>
</div>
<a id="subscriberBtn" class="waves-effect waves-light btn black"><i
class="material-icons right">send</i></a>
</div>
</div>
<div class="footer-copyright">
<div class="imemoi-copyright center-align">
Powered By IMEMOI - © Copyright 2011-2020 - VAT IT02883161206</a>
</div>
</div>
</div>
<!--jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--JavaScript -->
<script type="text/javascript" src="{{url_for('static', filename='js/materialize.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/main.js')}}"></script>
</body>
</html>
And this is the home.html template containing the carousel and the slides:
{% extends 'base.html' %}
{% block homeTitle %}
<title>imemoi: exclusive luxury bags | home</title>
{% endblock %}
{% block homeMeta %}
<meta name="description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:url" content="https://www.imemoi.com/" />
<meta property="og:image" content="https://www.imemoi.com/static/images/home_slide_3.jpg" />
<meta property="og:description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:type" content="website" />
{% endblock %}
{% block home %}
<div class="row">
<div class="carousel carousel-slider">
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_1.jpg" alt="First slide"></a>
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_2.jpg" alt="Second slide"></a>
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_3.jpg" alt="Third slide"></a>
</div>
</div>
{% endblock %}
This is the Javascript that initialize the carousel:
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({fullWidth: true });
window.setInterval(function () { $('.carousel').carousel('next') }, 4000);
});
The problem is this: when I load the page in the browser, the image is cutted and it remains cutted until I resize the screen, after resizing the screen the image dispays correctly:
I tried to solve the issue adding into the .css file this:
.slider{
height: 770.987px;
}
but then I have problems with the mobile visualization: there's empty space below the slide.
Last thig: images are all 3360 x 2240 pixels
I basically need to include the carousel in a way in which it will be visualized properly on laptop and mobile.

Basically the issue consists in the fact that the carousel is initialized before the images ar loaded and so the carousel height is not calculated properly.
Initializing the carousel when all the page is loaded and not only the DOM will solve the issue:
$( window ).on( "load", function() {
$('.carousel.carousel-slider').carousel({ fullWidth: true });
window.setInterval(function () { $('.carousel').carousel('next') }, 4000);
});

Popup rendering with close button but it does not work when clicked?

I have a custom popup that shows upon form submission to let the user know it was successful. Currently it displays when it's supposed to (although I can't get it to display in the middle right on top, but that's a minor issue) like shown below:
But the little X button does not actually close the message. You can click it but it does nothing, and if you reload the page then it's gone until you submit again.
base.html
{% load static purchasing_tags humanize %}
{% include 'operations/message.html' %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'images/favicon.ico' %}" type="image/x-icon" rel="shortcut icon"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{% static "css/plugins/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/apps.css" %}" rel="stylesheet">
<script src="{% static "js/plugins/jquery.js" %}"></script>
<script src="{% static "js/plugins/bootstrap.min.js" %}"></script>
<!--[if lt IE 9]>
<script src="{% static 'js/plugins/respond.js' %}"></script>
<![endif]-->
</head>
<body>
<div id="login" class="panel panel-default">
<div class="panel-body">
{% block main %}
{% endblock main %}
</div>
<div class="panel-footer">
{% block panel_footer %}
{% endblock %}
</div>
</div>
{% if messages %}
<script>
{% for message in messages %}
$(document).ready(function () {
$('.toast').toast('show');
});
{% endfor %}
</script>
{% endif %}
</body>
I think the problem could be related to the warning I get that says Unresolved function or method toast() on $('.toast').toast('show'); but I'm not sure how to resolve this issue (I got this from https://www.w3schools.com/bootstrap4/bootstrap_toast.asp but I don't know if I just didn't add something important to make this work)
enter_exit_area.html
{% extends "base.html" %}
{% load core_tags %}
{% block main %}
<form id="warehouseForm" action="" method="POST" class="form-horizontal" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div>
<label>Station</label>
{{ form.station_number }}
</div>
</div>
<div>
<div>
<button type="submit" name="enter_area" value="Enter" >Enter Area</button>
</div>
</div>
</form>
{% endblock main %}
message.html
{% for message in messages %}
<div style="position: absolute" class="toast bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div>
<strong class="mr-auto">
{{message.tags|capfirst}}
</strong>
<button type="button" class="ml-2 mb-1 close" aria-label="Close">
<span aria-hidden="true" data-dismiss="toast">×</span>
</button>
</div>
<div>
{{message|safe}}
</div>
</div>
{% endfor %}
views.py
class EnterExitArea(CreateView):
model = EmployeeWorkAreaLog
template_name = "operations/enter_exit_area.html"
form_class = WarehouseForm
def form_valid(self, form):
emp_num = form.cleaned_data['employee_number']
area = form.cleaned_data['work_area']
station = form.cleaned_data['station_number']
if 'enter_area' in self.request.POST:
form.save()
EmployeeWorkAreaLog.objects.filter(Q(employee_number=emp_num) & Q(work_area=area) & Q(time_out__isnull=True)).update(time_in=datetime.now())
messages.success(self.request, "You have entered")
return HttpResponseRedirect(self.request.path_info)

Spaceless is not working for removing whole html data spaces

what i need
i need to remove space between html elements.
twig code
{% spaceless %}
<head>
{% block title %}
<title>times</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
{% endblock %}
<meta property="fb:admins" content="10timesevents" />
<meta property="fb:app_id" content="432858816746099" />
{% block css %}
<noscript>
<link rel="stylesheet" href="http://im.gifbt.com/css/skel-noscript.css" />
<link rel="stylesheet" href="http://im.gifbt.com/css/style9.css" type="text/css" >
{% if DeviceDetcet() =='computer' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-desktop.css" type="text/css />
{% elseif DeviceDetcet() =='tablet' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-1000px.css" type="text/css />
{% elseif DeviceDetcet() =='phone' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-mobile.css" type="text/css />
{%endif%}
</noscript>
{% endblock %}
{% block scripts %}
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
{# <script src="http://im.gifbt.com/js/jquery.poptrox-2.2.js"></script>#}
<script src="http://im.gifbt.com/js/skel.min.js"></script>
{% if DeviceDetcet()=='phone'%}
<script src="http://im.gifbt.com/js/skelnew-panels.min.js"></script>
{%endif%}
<script src="http://im.gifbt.com/js/common.10.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
{% endblock %}
<!--[if lte IE 8]><script src="http://im.gifbt.com/js/html5shiv.js"></script><link rel="stylesheet" href="http://im.gifbt.com/css/ie8.css" /><![endif]-->
</head>
{% block body_tag %}
<body>
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<div style="position:fixed; width:100%; z-index:9; right:0; left:0; bottom:0;">
<div class="row flush">
<div style="height:60px; background:#fb6d02; padding:14px 7px 7px 7px!important; border-bottom:1px solid #e16000; border-top:1px solid #e16000">
<img src="http://im.gifbt.com/images/android100.png"style="float:left; width:30px; padding:0 5px 0 0" />
<p style=" font-size:.9em; line-height:1.1em; margin:0; ">
Download Now
<b class="bld" style="float:left; padding:7px 0 0 0; color:#fff">Stay updated with 10times App</b>
</p>
</div>
</div>
</div>
{% endif %}
<span id="evtname"></span>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MMVJS3"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MMVJS3');</script>
<!-- End Google Tag Manager -->
{% endblock %}
<!-- Header Wrapper -->
{% block homepage_head %}
{#Fixed navbar#}
<div class="navbar navbar-static navbar-default navbar-fixed-top" style="margin:0; min-height:38px; offsetheight:38px!important">
<div class="not-mobile" style="background:#fff">
<div class="new_header">
<div class="headerdiv">
<div class="l">
<ul class="navigation">
<li>Trade Shows</li>
<li>Conferences</li>
<li>Top 100</li>
<li>Venues</li>
</ul>
</div>
<div class="c">
<a href="http://10times.com" class="newlogo" ></a>
</div>
<div class="r">
<div class="user-nav">
<div id="header-login-dd-link">
<div class="user-dropdown dis-non">
<ul class="udr">
<li><a class="manage udbr" href="http://{{-login_url}}">Manage Event</a></li>
<li><a class="contact udbr" onclick="feed_back();">Contact Us</a></li>
<li><a class="signin udbr" onclick = "signin();">Sign In</a></li>
<li><a class='dashboard udbr' href='http://{{-login_url}}/dashboard'>My Dashboard</a></li>
</ul>
</div>
</div>
</div>
<div class="screen-block" style="display: none;"></div>
<a class="advt" href="{{ DomainDetect()}}/services">Advertise</a>
Add Event
<div class="searchdiv">
<span style="margin-top:10px" class="srhbx 4u" id="srh"><input type="button" value=" " class="srhbtn" onclick="checkHeaderSearch($(this));" id="explore-button" style="float:right" /><div id="search-box-area" class="p-relative search-box-area zind"><input type="text" name="" autocomplete="off" id ="explore-keywords" placeholder="search"
class="srhtxt homesearch" style="width:75%" required /><div id="explore-keywords-dropdown" autocorrect="off" ><div id="keywords-dd" class="kkdd"><ul id="keywords-by" style="margin:0;"></ul></div></div></div></span>
</div>
</div>
{#<div class="searchdiv">
<form action="{{ DomainDetect()}}/search" method="get" id="srh">
<div class="srhbx" id="search-box-area ">
<input type="text" class="srhtxt homesearch" autocomplete="off" id ="explore-keywords" placeholder="Search" name="q" {% if DeviceDetcet()=='computer'%} style="width:75%" {%endif%} required="">
<input type="submit" value=" " class="srhbtn" required="" >
<div id="explore-keywords-dropdown" autocorrect="off" >
<div id="keywords-dd" class="kkdd">
<ul id="keywords-by" style="margin:0;"></ul>
</div></div>
</div>
</form>
</div>
</div>#}
</div>
</div>
</div>
<div class="only-mobile">
<div class="new_header">
<div id="hide-header" class="headerdiv">
<div class="l">
<button type="button" class="navbar-toggle toggle-left" data-toggle="sidebar" data-target=".sidebar-left" style="margin:4px 0 0 5px; border:0; padding:8px">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="c">
</div>
<div class="r">
<div class="mobile_menu">
<a onclick="change();" class="srhbtn"> </a>
</div>
</div>
</div>
<div id="search-field" class="headerdiv dis-non" style="display: none;">
<form method="get" action="http://10times.com/search" id="srh" class="mr">
<div class="ll">
<button type="button" class="navbar-toggle toggle-left" data-toggle="sidebar" data-target=".sidebar-left" style="margin:4px 0 0 5px; border:0; padding:8px">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="search-field" class="cc">
<input type="hidden" name="cx" value="partner-pub-8525015516580200:vtujn0s4zis">
<input type="hidden" name="cof" value="FORid:10">
<input type="hidden" name="ie" value="ISO-8859-1">
<input type="text" name="q" id ="q" placeholder="Search..." class="srhtxt1" required />
</div>
<div class="rr">
<input type="submit" value=" " class="srhbtn1">
</div>
</form>
</div>
</div>
</div>
</div>{#endo of new main col-md-12#}
<div class="col-xs-7 col-md-3 sidebar sidebar-left sidebar-animate" style="background:#212628; padding:0; top:39px; position:fixed!important">
<div id="sidebar-wrapper" class="only-mobile">
<ul class="sidebar-nav" style="margin:0; padding:0;">
<li class="only-mobile">Home</li>
<li class="only-mobile">Trade Shows</li>
<li class="only-mobile">Conferences</li>
<li class="only-mobile">Top 100</li>
<li class="only-mobile">Venues</li>
<li class="only-mobile">Add Event</li>
<li class="only-mobile">Advertise</li>
<li class="only-mobile">Manage Event</li>
</ul>
</div>
</div>
</div>{#endo of row#}
</div>
{% block heightfromhead %}
<div style="height:51px" class="not-mobile"> </div>
<div style="height:40px" class="only-mobile"> </div>
{% endblock %}
<!-- header end -->
{% endblock %}
{# {% block search_head %}body goes here!{% endblock %} #}
{% block body %}body goes here!{% endblock %}
<!-- PAGE END -->
<script type="text/javascript">
function feed_back(){modal.open({content:'<div class="12u skel-cell-mainContent"><div class="box panel pd"><image src="/img/lineloading.gif"></div></div>'});$.get("/feedback",function(e){modal.open({content:e})})}
</script>
<script async src="http://im.gifbt.com/js/suggestive_search_2.js"></script>
{% block bottom_script %}
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
{% endblock %}
{# <script type="text/javascript">#}
{# $(document).ready(function(){#}
{# $("#searchpanel").removeClass('dis-non'); #}
{# });#}
{# </script>#}
</div>
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<script>
$( document ).ready(function() {
{% if cookie('get','10tphpopup') == '0'%}
{{-cookie('get','10tphpopup')}}
{{-cookie('set','10tphpopup',1,3600*24*365)}}
//$("div").first().addClass('dis-non');
var height=$( window ).height();
//height=height-50;
height=height+"px";
{%endif%}
});
</script>
{%endif%}
{% if 'iPhone' in UserAgent() or 'iphone' in UserAgent() %}
<script>
$( document ).ready(function() {
{% if cookie('get','10tphpopup') == '0'%}
{{-cookie('get','10tphpopup')}}
{{-cookie('set','10tphpopup',1,3600*24*365)}}
//$("div").first().addClass('dis-non');
var height=$( window ).height();
//height=height-50;
height=height+"px";
//modal.open({content:'<div class="12u skel-cell-mainContent"><div class="box panel pd"><image src="/img/lineloading.gif"></div></div>'});$.get("{{ DomainDetect()}}/android?type=iphone",function(e){modal.open({content:e})})
{%endif%}
});
</script>
{%endif%}
{% block bottom_script2 %}
{%endblock%}
{% block bottom_script3 %}
{#<link rel="stylesheet" type="text/css" href="{{ DomainDetect()}}/headersearch.css" />#}
{%endblock%}
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<script type="text/javascript">
if(sessionStorage.getItem("count1")=='NaN')
{
sessionStorage.setItem("count1", 0);
counters = 0;
}
if(sessionStorage.getItem("count1") == null)
{
sessionStorage.setItem("count1", 0);
counters = 0;
}
else
{
counters= parseInt(sessionStorage.getItem("count1"));
//alert(sessionStorage.getItem("count1"));
}
if (page_count == 4)
{
dataLayer.push({'event':'mobilePromo-android'});
}
</script>
{% endif %}
{%if 'iPhone' in UserAgent() or 'iphone' in UserAgent() %}
<script type="text/javascript">
if(sessionStorage.getItem("count2")=='NaN')
{
sessionStorage.setItem("count2", 0);
counters = 0;
}
if(sessionStorage.getItem("count2") == null)
{
sessionStorage.setItem("count2", 0);
counters = 0;
}
else
{
counters= parseInt(sessionStorage.getItem("count2"));
//alert(sessionStorage.getItem("count2"));
}
if (page_count == 4)
{
dataLayer.push({'event':'mobilePromo-iphone'});
}
</script>
{% endif %}
</body>
</html>
{% endspaceless %}
snapshot
while using spaceless spaces between html element are not removed.
i need to remove the spaces between html elements.
i have found use trim in twig but where to used in code.
any suggestion are most welcome.

This always worked for me.
{% extends '::base.html.twig' %}
{% block body %}
{% spaceless %}
HTML and anything else code goes here where spaces are removed
{% endspaceless %}
{% endblock %}

Spaces you're actually showing in your screenshot are between attributes, not tags.
That's why they are not removed.
If you look at Twig's source code, lib/Twig/Node/Spaceless.php, you can see the regular expression used:
public function compile(Twig_Compiler $compiler)
{
$compiler
->addDebugInfo($this)
->write("ob_start();\n")
->subcompile($this->getNode('body'))
->write("echo trim(preg_replace('/>\s+</', '><', ob_get_clean()));\n")
;
}
As you can see, only spaces between html tags are removed.
Check this fiddle, and especially the compiled template:
echo trim(preg_replace('/>\s+</', '><', ob_get_clean()));