I'm trying to update the div of a template with Django, so I use AJAX to refresh. The refresh works but during the first refresh, everything that was outside the div is doubled but only for the first refreshment . I've been blocking for quite a few days and I don't understand why, I applied the method found on this subject:Refresh a div to shows new rating in Django using JQuery and AJAX
So I include another page "update.html" which contains my variables to update. And with ajax, I refresh this page.
I'm sorry for the amount of code I provide, but I despair. Thank you for your feedback
My view.py
def RPI(request,rpi_id):
form = ContactForm(request.POST or None)
form2 = Boutons(request.POST or None)
formtest= test(request.POST or None)
Pactive = sql.run("Pactive") ## peut être passer en thread pour eviter l'attente de la nouvelle informaion et ralentir le code
Preactive = sql.run("Qreactive")
Courant = sql.run("I")
conf_thread = connect.conf()
conf_thread.start()
time.sleep(1)
power,statut=conf_thread.getConf()
val =""
if form2.is_valid():
val=form2.cleaned_data.get("btn")
if val == "Start" :
connect.start()
if val == "Reboot" :
connect.reboot()
if val == "Stop" :
connect.stop()
if val == "Code" :
connect.code_util()
if val == "fichier" :
print("fichier")
#file.FilepathName
if val == "Envoyer code":
myfile = request.FILES['myfile']
fs = FileSystemStorage(location='/home/opens/Bureau/appliweb/appliweb/ENVOI/')
filename = fs.save(myfile.name, myfile)
uploaded_file_url = fs.url(filename)
print(uploaded_file_url)
connect.envoi(uploaded_file_url)
if form.is_valid():
if val == "": ## a revoir
msg = form.cleaned_data['message']
message="RPI"+str(rpi_id)+","+str(msg)
thread.reception(message)
envoi = True
return render(request, 'page/RPI.html',locals())
def update(request):
return render(request, 'page/update.html',locals())
My update.html which contains my vairables to update:
<p>POWER : {{power}}<br>
Etat du programme : {{statut}}<br>
Puissance ACTIVE : {{Pactive}} W <br>
Puissance REACTIVE : {{Preactive}} VAR <br>
Courant mesurée : {{Courant}} A </p>
My RPI.html which contains my main page and include the update.html page:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/styleliste.css' %}">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>{% block title %}Liste des Raspberry Pi{% endblock %}</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="bg2">
<ul>
<li><a href="/page/accueil/">Accueil</a></li>
<li><a href="/page/ListRPI/">Liste des Raspberry PI</a></li>
<li><a href="/page/Info/">Plus d'informations</a></li>
<li><a class="active">Raspberry PI {{rpi_id}}</a></li>
</ul>
<section id="contentinfo">
<div id="update">
{% include 'page/update.html' %}
</div>
<div>
<form method="POST" >
{% csrf_token %}
{{ form.as_p }}
<input class="ml-button-3" type="submit" value="Envoyer message"/>
</form>
<form method ="POST" enctype="multipart/form-data">
{% csrf_token %}
<input class="ml-button-3" type="submit" name="btn" value="Start" />
<input class="ml-button-3"type="submit" name="btn" value="Stop" />
<input class="ml-button-3"type="submit" name="btn" value="Reboot" />
<input class="ml-button-3" type="submit" name="btn" value="Code" /> <br><br>
<input type="file" name="myfile">
<input class="ml-button-3" type="submit" name = "btn" value="Envoyer code"></button>
</form>
</div>
</section>
<script>
$.ajax({
url: 'http://localhost:8000/page/RPI/1/',
success: setInterval(function(){
alert('Vote successful!');
$("#update").load("update.html");
},5000)
});
</script>
</body>
</html>
