0
我有一個Django的項目與多個頁面。用JavaScript更新一頁，在屏幕上更新圖像和一些值。在基本模板中有一個菜單（所以它位於每個頁面的頂部）。 問題是，在每秒更新一次的屏幕上，在調用刷新後，菜單在實際的菜單下被複制（除此之外，一切是偉大的工作）django模板複製javascript刷新菜單欄的問題
這是我的基本模板：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
{% include "menus/mainMenuBar.html" %}
<body>
<h1>Garage Monitor {{ page_title }}</h1>
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
</body>
</html>
這裏是我的菜單欄：
<!DOCTYPE html>
<head>
<style type="text/css">
body {padding: 0; margin: 0;}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
</style>
</head>
<div id="wrap">
<ul class="navbar">
<li><a href="status">Status</a></li>
<li><a href="videoFeed">Video Feed</a></li>
<li><a href="#">Configuration</a>
<ul>
<li><a href="systemConfiguration">System</a></li>
<li><a href="userConfiguration">User</a></li>
<li><a href="userPermissions">User Permissions</a></li>
</ul>
</li>
<li><a href="#">Alerts</a>
<ul>
<li><a href="openAlerts">On Open</a></li>
<li><a href="closeAlerts">On Close</a></li>
<li><a href="tempAlerts">On Temperature</a></li>
<li><a href="humidityAlerts">On Humidity</a></li>
<li><a href="coAlerts">On Carbon Monoxide</a></li>
<li><a href="pirAlerts">On Movement</a></li>
</ul>
</li>
</ul>
</div>
這裏是我的模板，每秒更新一次：
{% extends "base.template" %}
{% block content %}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/static/garageMonitor/scripts/refreshDoor.js"></script>
<form method="get">
<table id="doorId">
<tr>
{% if doors.door1_status %}
<td><img src= {{ doors.door1_status }} width='100' height='100'/></td>
{% endif %}
{% if doors.door2_status %}
<td><img src= {{ doors.door2_status }} width='100' height='100'/></td>
{% endif %}
{% if doors.door3_status %}
<td><img src= {{ doors.door3_status }} width='100' height='100'/></td>
{% endif %}
{% if doors.door4_status %}
<td><img src= {{ doors.door4_status }} width='100' height='100'/></td>
{% endif %}
</tr>
<tr>
{% if doors.door1_name %}
<td><center>{{ doors.door1_name }}</center></td>
{% endif %}
{% if doors.door2_name %}
<td><center>{{ doors.door2_name }}</center></td>
{% endif %}
{% if doors.door3_name %}
<td><center>{{ doors.door3_name }}</center></td>
{% endif %}
{% if doors.door4_name %}
<td><center>{{ doors.door4_name }}</center></td>
{% endif %}
</tr>
<tr>
{% if doors.door1_status %}
<td><center><input type="submit" value="Activate" name="door1_activate" id="door1_activate"/></center></td>
{% endif %}
{% if doors.door2_name %}
<td><center><input type="submit" value="Activate" name="door2_activate" id="door2_activate"/></center></td>
{% endif %}
{% if doors.door3_name %}
<td><center><input type="submit" value="Activate" name="door3_activate" id="door3_activate"/></center></td>
{% endif %}
{% if doors.door4_name %}
<td><center><input type="submit" value="Activate" name="door4_activate" id="door4_activate"/></center></td>
{% endif %}
</tr>
<tr>
<td>Temperature: {{ doors.temperature }} </td>
<td>Humidity: {{ doors.humidity }} </td>
</tr>
</table>
</form>
{% endblock %}
這裏是我的javascript：
function refreshDoor() {
$.ajax({
url: '{% url status %}',
success: function (data) {
$('#doorId').html(data);
}
});
}
$(document).ready(function() {
setTimeout(refreshDoor,1000);
});
這是我的觀點，即更新模板：
def status(request):
logger = Logger.getLogger(Logger.LogType.WEB)
logger.log("method was" + request.method)
if request.method == 'POST':
logger.log("its a post")
else:
logger.log("not a post")
if(request.GET.get('door1_activate')):
toggleDoor(1)
return HttpResponseRedirect(status)
if(request.GET.get('door2_activate')):
toggleDoor(2)
return HttpResponseRedirect(status)
if(request.GET.get('door3_activate')):
toggleDoor(3)
return HttpResponseRedirect(status)
if(request.GET.get('door4_activate')):
toggleDoor(4)
return HttpResponseRedirect(status)
doorStats = allDoorsStatus()
door_dict = {"humidity":random.randint(1, 10), "temperature":random.randint(70, 100)}
now = strftime("%H:%M:%S", gmtime())
door_dict["Time"] = now
sysconfig = SystemConfiguration.objects.filter(idSystemConfiguration=1)
sysconfig = sysconfig[0]
if len(doorStats) >= 1:
door_dict["door1_status"] = "/static/garageMonitor/images/" + doorStats[0] + ".gif"
door_dict["door1_name"] = sysconfig.door1_name
if len(doorStats) >= 2:
door_dict["door2_status"] = "/static/garageMonitor/images/" + doorStats[1] + ".gif"
door_dict["door2_name"] = sysconfig.door2_name
if len(doorStats) >= 3:
door_dict["door3_status"] = "/static/garageMonitor/images/" + doorStats[2] + ".gif"
door_dict["door3_name"] = sysconfig.door3_name
if len(doorStats) >= 4:
door_dict["door4_status"] = "/static/garageMonitor/images/" + doorStats[3] + ".gif"
door_dict["door4_name"] = sysconfig.door4_name
door_dict["page_title"] = "Status"
return render_to_response('status.html', {'doors': door_dict, "page_title":"Status"})
非常好。我唯一需要做的改變就是把javascript放到door.html（來自原始的status.html）。 – jordanthompson
太棒了:)請問你能接受我的答案嗎？謝謝 – Oli