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?

How to figure out where the bugs are in a Django app

{% extends 'main.html' %}
{% load static %}
{% block content %}
{% if page == "register" %}
<h1>Hello This is register Page!!!</h1>
<form method="POST" action="{% url 'register' %}">
{% csrf_token %} {{form.as_p}}
<input type="submit" value="Register" />
</form>
<p>Aready have an account Login </p>
{% else %}
<div class="auth">
<div class="card">
<div class="auth__header text-center">
<a href="/">
<img src="{% static 'images/icon.svg' %}" alt="icon" />
</a>
<h3>Account Login</h3>
<p>Hello Developer, Welcome Back!</p>
</div>
<form action="{% url 'login' %}" method="POST" class="form auth__form">
{% csrf_token %}
<!-- Input:Email -->
<div class="form__field">
<label for="formInput#text">Username: </label>
<input
class="input input--text"
id="formInput#text"
type="text"
name="username"
placeholder="Enter your username..."
/>
</div>
<!-- Input:Password -->
<div class="form__field">
<label for="formInput#password">Password: </label>
<input
class="input input--password"
id="formInput#passowrd"
type="password"
name="password"
placeholder="••••••••"
/>
</div>
<div class="auth__actions">
<input class="btn btn--sub btn--lg" type="submit" value="Log In" />
Forget Password?
</div>
</form>
<div class="auth__alternative">
<p>Don’t have an Account?</p>
Sign Up
</div>
</div>
</div>
{% endif %}
{% endblock content %}
Here is my main.html:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!-- Icon - IconMonster -->
<link
rel="stylesheet"
href="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css"
/>
<!-- Mumble UI -->
<link rel="stylesheet" href="{% static 'uikit/styles/uikit.css' %}" />
<!-- Dev Search UI -->
<link rel="stylesheet" href="{% static 'styles/main.css' %}" />
<link rel="stylesheet" href="{% static 'uikit/styles/app.css' %}" />
<title>DevSearch - Connect with Developers!</title>
</head>
<body>
{% include 'navbar.html' %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block content %}
{% endblock content %}
</body>
</html>
I have been taking Udemy course "Learn to build awesome websites with Python & Django!" by Dennis Ivy and I have reached almost middle of the course but when I reached here I got stuck with these errors. How can I get rid of these errors?
TemplateSyntaxError at /login/
Invalid block tag on line 38: 'else', expected 'endblock'. Did you forget to register or load this tag?
Request Method: GET
Request URL: http://127.0.0.1:8000/login/
Django Version: 4.0.1
Exception Type: TemplateSyntaxError
Exception Value:
Invalid block tag on line 38: 'else', expected 'endblock'. Did you forget to register or load this tag?
Exception Location: D:\Python\Django\devsearch\djenv\lib\site-packages\django\template\base.py, line 552, in invalid_block_tag
Python Executable: D:\Python\Django\devsearch\djenv\Scripts\python.exe
Python Version: 3.10.0
If I put {% load static %} above else block as below, it does work but I have to use inside if statement also, so when I do it as above, it gives error.
{% extends 'main.html' %}{% block content %}{% if page == 'register' %}
<h1>Hello This is register Page!!!</h1>
<form method="POST" action="{% url 'register' %}">
{% csrf_token %} {{form.as_p}}
<input type="submit" value="Register" />
</form>
{% load static %} {% else %}
<div class="auth">
<div class="card">
<div class="auth__header text-center">
<a href="/">
<img src="{% static 'images/icon.svg' %}" alt="icon" />
</a>
<h3>Account Login</h3>
<p>Hello Developer, Welcome Back!</p>
</div>
<form action="{% url 'login' %}" method="POST" class="form auth__form">
{% csrf_token %}
<!-- Input:Email -->
<div class="form__field">
<label for="formInput#text">Username: </label>
<input
class="input input--text"
id="formInput#text"
type="text"
name="username"
placeholder="Enter your username..."
/>
</div>
<!-- Input:Password -->
<div class="form__field">
<label for="formInput#password">Password: </label>
<input
class="input input--password"
id="formInput#passowrd"
type="password"
name="password"
placeholder="••••••••"
/>
</div>
<div class="auth__actions">
<input class="btn btn--sub btn--lg" type="submit" value="Log In" />
Forget Password?
</div>
</form>
<div class="auth__alternative">
<p>Don’t have an Account?</p>
Sign Up
</div>
</div>
</div>
{% endif %} {% endblock content %}
Here is my nave-bar.html:
{% load static %}
<!-- Header Section -->
<header class="header">
<div class="container container--narrow">
<a href="{% url 'profiles' %}" class="header__logo">
<img src="{% static 'images/logo.svg' %}" alt="DevSearch Logo" />
</a>
<nav class="header__nav">
<input type="checkbox" id="responsive-menu" />
<label for="responsive-menu" class="toggle-menu">
<span>Menu</span>
<div class="toggle-menu__lines"></div>
</label>
<ul class="header__menu">
<li class="header__menuItem">
Developers
</li>
<li class="header__menuItem">
Projects
</li>
<li class="header__menuItem">Inbox</li>
{% if request.user.is_authenticated %}
<li class="header__menuItem">
Add Projects
</li>
<li class="header__menuItem">
Log Out
</li>
{% else %}
<li class="header__menuItem">
Login/Sign Up
</li>
{% endif %}
</ul>
</nav>
</div>
</header>

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

Displaying jquery result, data there but not displaying

Using flask and jquery. I can see the data returned in dev tools but i'ts not displaying.
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>integrator</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-layers.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/init.js') }}"></script>
<script src="{{ url_for('static', filename='js/searchUpdate.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
</head>
<body id="top">
<!-- Header -->
<header id="header" class="skel-layers-fixed">
<h1>Integrator</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>Acct. Info</li>
<li>Ticket Search</li>
<li>Sharepoint</li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>integrator</h2>
<p>CNG service integrator</p>
<p><form class="pure-form" action="/clientLookup" method="post">
<input type="text" class="pure-input-rounded" name="clientID">
<button type="submit" class="pure-button">Search</button>
</form></p>
</div>
</section>
<!-- One -->
{% block content %}
{% endblock %}
<!-- Two -->
{% block secondContent %}
{% endblock %}
<!-- Three -->
{% block searchContent %}
{% endblock %}
<!-- Footer -->
<footer id="footer">
<div class="container">
<div class="row double">
<div class="6u">
<div class="row collapse-at-2">
<div class="6u">
<h3>Links</h3>
<ul class="alt">
<li>Link to stuff</li>
<li>Link to stuff</li>
<li>Link to stuff</li>
</ul>
</div>
<div class="6u">
<h3>Links</h3>
<ul class="alt">
<li>Link to stuff</li>
<li>Link to stuff</li>
<li>Link to stuff</li>
</ul>
</div>
</div>
</div>
<div class="6u">
<h2>integrator</h2>
<p>Connecting Sharepoint, Tigerpaw, Appenate,
Teams, and documentation into one interface</p>
</div>
</div>
<ul class="copyright">
<li>© Untitled. All rights reserved.</li>
</ul>
</div>
</footer>
</body>
</html>
searchUpdate.js
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/soSearch', {
searchTerm: $('input[name="searchTerm"]').val(),
workType: $('input[name="workType"]:checked').val(),
clientID: $('input[name="acctNumber"]').val(),
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});
related html block for index. held in clientInfo.html ( if it matters all 3 blocks are in this same file)
{% block searchContent %}
<section id="three" class="wrapper style1">
<div class="container">
<div class="row">
<div class="12u">
<section>
<h2>SO Search</h2>
<img src="{{ url_for('static', filename='images/pic03.jpg') }}" alt="" />
<form class="pure-form">
<fieldset>
<p>
<input type="text" placeholder="searchterm" name="searchTerm">
<input type="hidden" name="acctNumber" value="{{ infoItems[0]['AccountNumber'] }}">
<label for="option-one" class="pure-radio">
<input id="option-one" type="radio" name="workType" value="WorkPerformed">
Work Performed
</label>
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="workType" value="WorkRequested">
Work requested
</label>
<a href=# id=process_input><button class='pure-button'>Search</button></a>
</p>
</fieldset>
</form>
<p id=result></p>
</section>
</div>
</div>
</div>
</section>
{% endblock %}
Everything works up until trying to display the returned data. Nothing is shown in
<p id=result></p>
I was using this Python/AJAX as my go to.
Once I click search everything works. I can see in dev tools the json is handed back. Like I said, nothing is shown.
As a secondary question, since I'm passing back a good bit of info the <p> isn't going to work, it's just for testing. Should I assume that if I want to build a dynamic table of returned data that has to be done inside the js as opposed to python since there is no real page refresh?

Turns out the example I was using was wrong. Changed to:
$.getJSON('/soSearch', {
searchTerm: $('input[name="searchTerm"]').val(),
workType: $('input[name="workType"]:checked').val(),
clientID: $('input[name="acctNumber"] option:selected').val(),
}, function(data) {
resultList = '<ul class="alt">';
for ( x in data) {
console.log(data[x]);
resultList += '<li><b>' + x + ' </b> : ' + data[x] + '</li>';
}
resultList += '</ul>';
//console.log(JSON.stringify(data[0][0]));
$('#result').html(resultList);
});
return false;
});
Overall it was the .text to .html that made it display.

How to dynamically update the contents of a div in HTML and maintain the previous style?

I have made a dashboard using Flask (Python) that displays the images present on a folder in my Desktop. Now, that folder is going to be updated with new images every 5 seconds or so and that's why I would like to update my website with the new images. I figured that using Javascript/Jquery AJAX would be best for smooth user experience. I succesfully managed to update my dashboard every 2 seconds using Jquery as shown in the following code.
However my problem is loss of styling. As you can see in the 1st screenshot , the Jumbotron is perfectly inside the inner boundary. But in the 2nd image you can see that the entire central portion of the website including the Jumbotron and the images shift slightly from centre. The red marking on the image indicates the shift. So, I wanted to know how can I prevent Jquery from changing my style. I want the refreshed page to replace the previous page as it is.
Here are my codes -
Flask routes.py -
#app.route('/image/<im>')
#login_required
def image(im):
image_src=[im+'/'+i for i in os.listdir(os.path.join(app.static_folder,im))]
rows=math.ceil(len(image_src)/3)
print(image_src)
return render_template('dashboard.html',title='Welcome',images=image_src,rows=rows,image_date=im)
HTML - dashboard.html
{% extends "base.html" %}
{% block content %}
<hr>
<div class="container dash-container main-body image-area" >
<div class="row">
<br>
<hr >
<br>
<div class="col-md-12">
<div class="jumbotron ">
<h1 id="hdr">DASHBOARD</h1>
</div>
</div>
</div>
{% if images %}
<div class="row" id="info">
<span class="glyphicon glyphicon-backward" aria-hidden="true"></span>
</div>
<br><br>
<div class="row">
<div class="col-md-12" id="info">
{% set ns = namespace(counter=0) %}
<table class="table table-hover table-condensed table-bordered images-table" cellspacing="5" cellpadding="5">
{% for row in range(rows) %}
<tr class="image-hover">
{% for data in range(3) %}
{% if ns.counter < images|length %}
<td style="width:10%;">
<img src="{{ url_for('static',filename=images[ns.counter]) }}" alt="User Image" width="220" height="220">
<br>
{% set ns.counter = ns.counter + 1 %}
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
</div>
{% endif %}
</div>
<script type="text/javascript">
setInterval(function(){
$('.image-area').load("{{ url_for('image',im=image_date) }}");
}, 2000)
</script>
{% endblock %}
The HTML file basically arranges the images in rows with max items of 3 per row.
CSS - dashboard.css
#info{
font-size: 23px;
font-family: 'Saira',sans-serif;
text-align: center;
color: black;
}
.dash-container{
height: 100%;
}
.images-table{
width: auto !important;
margin-left: 10%;
margin-right: 10%;
}
.folder-link {
color:black /*#1cd1ff*/;
font-size: 30px;
}
table tr.row-hover:hover{
background-color: #190101;
}
table tr.row-hover:hover .folder-link{
color:white;
}
table tr.image-hover:hover .folder-link{
color:black;
}
table tr.row-hover:hover .folder-link:hover{
color:#00ff83;
}
table.images-table tr.image-hover:hover{
background-color: black;
}
table.images-table tr.image-hover td:hover{
background-color: white;
}
Here are the Images . Image 1 is the default website without any javascript and Image 2 is the website after ajax calls.
I want the refreshed page to perfectly overwrite the previous view and not produce the shift from center.
Please help.
EDIT 1:
I have noticed that if i replace the class selector in Jquery with 'body' tag, the styling is retained. However, unlike previous type, the page refresh takes atleast 3x more time.
$('.image-area').load("{{ url_for('image',im=image_date) }}");
changed to
$('body').load("{{ url_for('image',im=image_date) }}");
Here is my base.html code -
<!DOCTYPE html>
<html>
<head>
{{ moment.include_jquery() }}
{{ moment.include_moment() }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/base.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/about.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/index.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/dashboard.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/display.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/feedback.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/login.css') }}">
<link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Welcome_segregator</title>
{% endif %}
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-custom">
<div class="container" >
<div class="navbar-header">
{% if current_user.username %}
<a class="navbar-brand nav-custom" href="{{ url_for('index') }}" ><span id="header"><span id="logo"><strong>Welcome </strong></span id="header"><strong>{{ current_user.username|striptags }} !</strong></span></a>
{% else %}
<a class="navbar-brand nav-custom" href="{{ url_for('index') }}"><span id="header"><span id="logo"><strong>Welcome </strong></span></span></a>
{% endif %}
</div>
<ul class="nav navbar-nav navbar-right " >
<li class="nav-custom"><a class="nav navbar-nav" href="{{ url_for('index') }}"><span class="glyphicon glyphicon-home "> <span id="header"><strong>Home</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-dashboard"> <span id="header"><strong>Dashboard</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('about') }}"><span class="glyphicon glyphicon-user"> <span id="header"><strong>About Us</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('feedback') }}"><span class="glyphicon glyphicon-pencil"> <span id="header"><strong>Feedback</strong></span></a></li>
{% if current_user.is_anonymous %}
<li><a class="nav navbar-nav" href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"> <span id="header"><strong>Login</strong></span></a></li>
{% else %}
<li><a class="nav navbar-nav" href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-off"> <span id="header"><strong>Logout</strong></span></a></li>
{% endif %}
</ul>
</div>
</nav>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</body>
</html>

Per my comment above: I think your current call to $('.image-area').load("{{ url_for('image',im=image_date) }}"); is causing you to get nesting .image-area divs.
Try switching
{% block content %}{% endblock %}
to
<div id='img-cont'>{% block content %}{% endblock %}</div>
And then change your js to
$('.img-cont').load("{{ url_for('image',im=image_date) }}");