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?
Related
I am currently trying to use DataTables to how the data held in my Django Model. However, I am unsure where I am going wrong with my HTML code as it is not showing the basic template table it is supposed to show. Currently, my table looks like this:
enter image description here
I was expecting it to look like this: enter image description here
Any form of help is appreciated. Thank you. Below are some of my code related to this problem:
results.html (the page supposed to show the table)
{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
<!------ Side nav bar ---------->
{% block content %}
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='container'>
<table id='myTable' class='display' style="width:100%">
<thead>
<tr>
<th>Website</th>
<th>Title</th>
<th>Link</th>
</tr>
</thead>
{% for result in results %}
<tr>
<td>{{ result.website }}</td>
<td>{{ result.title }}</td>
<td>{{ result.anomaly_details }}</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
{% endfor %}
</table>
</div>
{% endblock content %}
{% block script %}
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable({
"order": [[ 3, "asc" ]]
});
} );
</script>
{% endblock script %}
base.html (results.html inherits this template)
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
{% if title %}
<title>Django Blog - {{ title }}</title>
{% else %}
<title>Django Blog</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ml-20">
<a class="navbar-brand" href="#">OPS Web Scrape</a>
{% if user.is_authenticated %}
<a class="navbar-brand" href="{% url 'logout' %}">Logout</a>
{% endif %}
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
{% block script %}{% endblock script %}
</body>
</html>
views.py
class PostListView(ListView):
model = ResultsTable
template_name = 'app/results.html'
context_object_name = 'results'
def get_context_data(self, *args, **kwargs):
global name
context = super().get_context_data(*args, **kwargs)
context['name'] = name
return context
Try this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<div class='container'>
<table id='myTable' class='display' style="width:100%">
<thead>
<tr>
<th>Website</th>
<th>Title</th>
<th>Link</th>
<th>Action</th>
</tr>
</thead>
{% for result in results %}
<tr>
<td>{{ result.website }}</td>
<td>{{ result.title }}</td>
<td>{{ result.anomaly_details }}</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
<tr>
<td>{{ result.website }}</td>
<td>{{ result.title }}</td>
<td>{{ result.anomaly_details }}</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
{% endfor %}
</table>
</div>
{% endblock content %}
{% block script %}
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable({
"order": [[ 3, "asc" ]]
});
} );
</script>
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)
I have added the datepicker function but I am not able to use it. I believe that it is I am doing some fundamental mistake since I am a beginner in javascript and jQuery.
The input tag is in the invite.html file which I am including using django's template tags all the jquery and semantic files I have downloded them in the static folder. I have added the datepicker.js files also I.Thanks in advance. I added and alert in the datepicker script it worked fine, So I think it is the function is added properly but
I get these errors:
jQuery.Deferred exception: $(...).datepicker is not a function
TypeError: $(...).datepicker is not a function
Scholarship.html is the main html file in which I have included the invite.html file and the input tag id="datepicker" is in bold in invite.html the fuction that is generating the is in bold.
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fusion!
{% block title %}{% endblock %}
</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/icon.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'globals/css/mediaquery.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic-notify.css' %}">
<script type="text/javascript" src="{% static 'globals/js/jquery.min.js' %}"> </script>
<script type="text/javascript" src="{% static 'globals/js/jquery.formset.js' %}"> </script>
<script type="text/javascript" src="{% static 'globals/js/semantic-notify.js' %}"> </script>
<script type="text/javascript" src="{% static 'globals/js/ajax-post.js' %}"></script>
{% block css %}
{% endblock %}
</head>
{% comment %}style="background-color: rgba(189, 189, 189, 0.1);"{% endcomment %}
<body id="body">
{% block body %}
{% block navBar %}
{% endblock %}
{% endblock %}
<div id="messages">
{% for message in messages %}
<div class="message" tag="{% if 'success' in message.tags %}green{% elif 'error' in message.tags %}red{% else %} blue {% endif %}" message="{{ message|safe }}"></div>
{% endfor %}
</div>
</body>
<script type="text/javascript" src="{% static 'globals/js/semantic.min.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/dropdown.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/tab.js' %}"></script>
<script>
$(document).ready(function() {
$('#messages').find('.message').each(function(){
$.uiAlert({
textHead: $(this).attr('message'), // header
text: '',
bgcolor: $(this).attr('tag'), // background-color
textcolor: '#fff', // color
position: 'bottom-left',// position . top And bottom || left / center / right
time: 3, // time
});
});
$('#new-notification')
.popup({
inline: true,
hoverable: true,
position: 'bottom left',
popup: $('#notificationPopup'),
on: 'click',
delay: {
show: 250,
hide: 500
}
})
;
});
</script>
Scholarship.html
{% extends 'globals/base.html' %}
{% load static %}
{% block title %}
Awards & Scholarship
{% endblock %}
{% block body %}
{% block navBar %}
{% include 'dashboard/navbar.html' %}
{% endblock %}
{% block winners %}
{% include 'scholarshipsModule/winners.html' with winners=winners %}
{% endblock %}
</div>
{% comment %}The Personal Details end here!{% endcomment %}
{% comment %}The Publications starts here!{% endcomment %}
<div class="ui tab segment" data-tab="second">
{% block invite %}
{% include 'scholarshipsModule/invite.html' with release=release ch=ch time=time awards=awards form=form %}
{% endblock %} *invite.html is included here*
</div>
</div>
</div>
{% comment %}The right-rail segment ends here!{% endcomment %}
{% comment %}The right-margin segment!{% endcomment %}
<div class="column"></div>
</div>
{% endblock %}
{% block javascript %}
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<script type="text/javascript" src="{% static 'globals/js/datepicker.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/tablesort.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/editProfile.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/modal.js' %}"></script>
<script>
$('.message .close')
.on('click', function() {
$(this)
.closest('.message')
.transition('fade')
;
})
;
**$( function() {
$( "#datepicker" ).datepicker(); This is the code that generates the error
} );**
</script>
{% endblock javascript %}
invite.html
{% load static %}
{% block winners %}
<div class="two fields">
<div class="field">
<label>Start date</label>
<div class="ui input large left icon">
<i class="calendar icon"></i>
**<input id="datepicker" type="text" name="From" placeholder="YYYY-MM-DD" required>
</div>**
</div>
<div class="field">
<label>End Date</label>
<div class="ui input large left icon">
<i class="calendar icon"></i>
<input type="text" name="To" placeholder="YYYY-MMM-DD" required>
</div>
</div>
<div class="ui divider"></div>
</div>
</div>
{% endblock %}
This is the datepicker.js fuction which is their in the globals/js folder
datepicker.js script
$('.rangestart').calendar({
type: 'date',
});
$('.rangeend').calendar({
type: 'date',
});
$(".date.calendar").calendar({ type: "date" });
You should add this below script into your site.. after that your error will be remove.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});
#ui-datepicker-div { font-size: 12px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"></script>
Date Picker: <input type="text" id="date1" name="date1"/> <br/>
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) }}");
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.