[Fixed]-Problems with django template duplicating the menu bar on javascript refresh

by

1đź‘Ť

âś…

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)
👤Oli

Leave a comment