个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 08:44:44 24 4
gpt4 key购买 nike

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

这是我更新模板的 View :

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

最佳答案

问题是您试图将整个 HTML 页面(包括菜单栏)加载到“doorId”表中。

您可以将需要刷新的部分拆分到一个新的 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 请求，则在 View 底部仅呈现表格内部。

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)

关于javascript - django 模板在 javascript 刷新时复制菜单栏的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32938999/

24 4 0
文章推荐： javascript - ajax每次点击 "load more"按钮加载2条记录
文章推荐： javascript - 图表线不随可缩放图表区域移动
文章推荐： javascript - Bootstrap : Creating Multiple Popovers with Button click
文章推荐： javaScript 确定将鼠标悬停在哪个 p 元素上以调用事件处理程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com