stackoom
  简体   繁体   中英

Problems with django template duplicating the menu bar on javascript refresh

 原文  2015-10-04 22:21:26  2   1    javascript/ jquery/ html/ django

Question

I have a django project with multiple pages. One page is refreshed with a javascript that updates an image and a couple of values on the screen. There is a menu that is in the base template (so it is at the top of every page.) The problem is that on the screen that is updated every second, the menu is duplicated below the real one after the refresh is called (other than that, everything is working great.)

Here is my base template: 

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

Here is my menubar: 

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

Here is my template that is updated every second: 

{% 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 %}

Here is my javascript: 

function refreshDoor() {
  $.ajax({
    url: '{% url status %}',
    success: function (data) {
      $('#doorId').html(data);
    }
  });
}


$( document ).ready(function () {
  setTimeout(refreshDoor,1000);
});

Here is my view that updates the template: 

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

1 answers

solution1
 1 ACCPTED  2015-10-04 22:29:54

The problem is that you're trying to load the entire HTML page, including the menu bar, in to the "doorId" table.

You could split off the part that needs to refresh in to a new HTML file, so your status.html becomes 

{% 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 %}

and a new 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>

Then at the bottom of your view, render only the table inner if you're handling an AJAX request. 

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)

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Jquery Load is Duplicating Behaviour in django template Django - Best way to refresh a div in a Template using Javascript? javascript toggle menu bar moving menu bar with javascript How to refresh a table in template of Django Dropdown menu on refresh changes javascript Scroll bar and refresh a line in JavaScript creating and copy/duplicating a select/option list menu with JavaScript Progress bar in Django with JavaScript? accordion vertical menu bar on page refresh sub menu hides
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM