Question

我有一个包含多个页面的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"})

Answer 1

问题是您正在尝试将整个HTML页面（包括菜单栏）加载到＆＃34; doorId＆＃34;表

您可以将需要刷新的部分拆分为新的HTML文件，这样您的status.html就会变为

{% 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">
    {% include "doorid.html" %}
  </table>
</form>
{% endblock %}

和一个新的doorid.html

<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>

然后在视图的底部，如果您正在处理AJAX请求，则只渲染表格内部。

door_dict["page_title"] = "Status"
context = {'doors': door_dict, "page_title":"Status"}
if request.is_ajax():
    return render_to_response('doorid.html', context)
else:
    return render_to_response('status.html', context)

django模板在javascript刷新时复制菜单栏的问题

1 个答案: