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?

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)

Javascript doesn't work in django template

I have a template which inherits from a base template in javascript.
Here is the base template:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>{% block title %}{% endblock %}</title>
{% include 'base/css.html' %}
{% block head %}{% endblock %}
</head>
<body id="page-top">
{% include 'base/navbar.html' %}
{% block content %}{% endblock %}
{% include 'base/js.html' %}
{% block js %}{% endblock %}
</body>
</html>
Here is the template where the javascript doesn't work:
{% extends 'base.html' %}
{% load static %}
{% block head %}
<link href="{% static 'css/card.css' %}" rel="stylesheet"></link>
{% endblock %}
{% block content %}
<div class="card-wrapper">
{% for account in object_list %}
<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">{{ account.price }}</span>
<span class="product_name">{{ account.get_arena_readable }}</span>
<p>King level {{ account.king_tower }}</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{% block js %}
<script src="{% static 'js/card.js' %}"></script>
{% endblock js %}
The css loads fine, however the javascript doesn't. I have put the javascript tag in the correct block so the contents of the file should be loaded when I run the local development server. Why does none of the javascript get included?
It appears to be include since card.js is present.

Also in your base.html you have {% block js %}{% endblock %} but in the second template you have {% block js %}{% endblock js %}.

You are trying to access static files from static directory as described here:
<script src="{% static 'js/card.js' %}"></script>
Whereas in your settings you have named the static directory static_local
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static_local'),
]
So based on this image:
The name of your static directory is static.
So in your settings.STATICFILES_DIRS, replace static_local with static like the following:
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]

Django template inheritence

In my django app i have a base.html template as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>{% block title %}{% endblock %}</title>
{# ----------------- STATIC FILES -------------- #}
{% load staticfiles %}
<link rel="icon" type="image/x-icon" href="{% static 'images/tab_logo.ico' %}"/>
{% block site_css %}
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'core/css/style.css' %}" rel="stylesheet" type="text/css"/>
{% endblock %}
{% block extra_css %}{% endblock %}
<meta name="viewport" content="width=device-width">
</head>
<body>
{% block navbar %}
<!-- START NAV -->
<nav role='navigation'>
<a data-page="home" id="home" class="active" href="/">Home</a>
<a data-page="blog" id="blog" href="{% url 'blog' %}">Blog</a>
<a data-page="contact" id="contact" href="{% url 'contact' %}">Contact Us</a>
<a data-page="about" id="about" href="{% url 'about' %}">About</a>
</nav>
<hr>
{% endblock %}
<!--start container-->
<div class="container">
<div class="row">
<div class="span9">
<div id="content">
<br>
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
<!--end container-->
<hr>
{% include 'core/footer.html' %}
{% block javascript %}
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="{% static 'core/js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'core/js/skin.js' %}"></script>
{% endblock %}
{% block add_js %}
{% endblock %}
</body>
</html>
I am trying to make separate template files for blog,about,contact
{% extends 'core/base.html' %}
{% block add_js %}
<script>
$(document).ready(skinchange('blog'));
</script>
{% endblock %}
{% block content %}
<h1 style="text-align: center;font-size: 32px;">BLOG</h1>
{% endblock %}
Now in the index page(nav bar home active), when i click on the blog link (Blog) redirection to localhost:8000/blog/ is done.When this page is loaded i want to change the class of nav a for blog to be active so that the style of the page is changed as per my css.For this i am executing a jquery script -> $(document).ready(skinchange('blog'));
where skinchange is a function in skin.js
'use strict';
function skinchange(page) {
page = typeof page !== 'undefined' ? page : 'home';
var link = $("nav a");
$("body").removeClass().addClass(page);
link.removeClass("active");
var d = document.getElementById(page);
d.className +="active";
}
for some reason on new page loading the class attribute of the nav links remains same as the base.html.The jquery script is not executing.
Can anyone help me what i am doing wrong here.

Including block content between templates

I have a big problem with including blocks between templates. The code is following:
{# layout.html.twig #} (simplified version)
<html>
<head>
.....
.....
{% block stylesheets%}{% endblock %}
{% block javascripts %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
{# index.html.twig #}
{% extends "demoBundle::layout.html.twig" %}
{% block content %}
some content {# <---- this is working #}
{% render(controller('demoBundle:Default:renderIndexContent')) %}
{% endblock %}
{# DefaultController.php #}
...
...
return $this->render('demoBundle:Gallery:slideshow.html.twig');
...
...
{# slideshow.html.twig #}
{% block stylesheet %} {# <---- this is not working #}
<link rel="stylesheets" href="{{ asset('bundles/cms/css/pictureSlider.css') }}"/>
{% endblock %}
The idea is, index.html.twig extends layout, and rendering another template with name slideshow.html.twig trought controller. But I need include stylesheets inner block in the template slideshow.html.twig to stylesheets block in head position in the main template layout.html.twig, but does not work. When i add tag {{ parent() }} to the block stylesheet in the template slideshow.html.twig, symfony say
Calling "parent" on a template that does not extend nor "use" another template is forbidden in demoBundle:Gallery:slideshow.html.twig at line 3
/EDITED*/
No, it is not resolution for me, because i have some variables returnet from defaultcontroller.php in template index.html.twig.
Ok, the previous code was just a simpliefed example. I enclose a concrete example
index.html.twig
{% extends "cmsBundle::layout.html.twig" %}
{% block rightSideBar %}{% endblock %}
{% block content %}
<div class="top_block">
<div id="module-1" class="no-title">
{% for block in blocksCenter %}
{% if (block.position=="center-top") %}
{% render(controller('cmsBundle:Default:renderIndexBlocks',{'blockname':block.name})) %}
{% endif %}
{% endfor %}
</div>
...
block.name is for example "slideshow". In the DefaultController.php inner method renderIndexBlocksAction is this piece of code:
DefaultController.php
return $this->render(
'cmsBundle:Blocks:'.$blockname.'.html.twig'
,array('items'=>$items)
);
this render template name slideshow.html.twig, there is this piece of code:
slideshow.html.twig
{% block styles %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/cms/css/pictureSlider.css') }}" type="text/css" media="all"/>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('bundles/cms/js/jquery-1.11.0.min.js') }}"></script>
{% endblock %}
for completenes, her is the piece of layout.html.twig
layout.html.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="{{ asset('bundles/cms/images/favicon.ico') }}" type="image/x-icon" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="{{ asset('bundles/cms/css/style.css') }}" type="text/css" media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/cms/css/menu.css') }}" type="text/css" media="all"/>
{% block styles %}{% endblock %}
{% block javascripts %}{% endblock %}
</head>
<body>
<div id="bg_image"><img src="{{ asset('bundles/cms/images/AbstractBlue.jpg') }}" alt="" style="width:100%; height:100%;"></div>
<div id="mainContainer">
<div id="header">
<div id="top1">
<div id="logo">
<div id="search">
{% include 'cmsBundle:Default:search.html.twig' %}
</div>
<div class="wrapper" style="width:987px"/>
<div id="menu" class="menu">
{% render(controller('cmsBundle:Default:renderMenu')) %}
</div>
</div>
</div>
</div>
</div>
<div id="blocks" class="blocks">{% block rightSideBar %}{% endblock %}</div>
<!--CONTENT-->
<div id="mainContentm">
{% block content %}{% endblock %}
</div><!-- end #content -->
<!-- #footer -->
<div id="footer">
<div id="footer-left">
</div>
<div id="footer-right">
</div>
</div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>

The error itself says calling parent on a template that does not extend nor use means your template slideshow.html.twig is not extending any parent template or layout to follow thus if there is not parent template you cannot call the stylesheets of member that does not exist,for answer to your question in slideshow.html.twig use
{% extends '::index.html.twig' %}
and then define
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheets" href="{{ asset('bundles/cms/css/pictureSlider.css') }}"/>
{% endblock %}
If there are any stylesheets in index.html.twig these will be included in your template,as viewing the index.html.twig code there is empty stylesheets block.If layout.html.twig has also defined a block for stylesheets then you should call {{ parent() }} function in the stylesheets block of index.html.twig so it will include the stylesheets of its parent layout i.e layout.html.twig