Mise à jour CSS suite à la requête ajax
Bonsoir à tous,
Je me permet de poster car je n'ai pas trouver d'équivalent ailleurs pour m'aiguiller.
J'ai une page web qui m'affiche des boutons afin de commander des luminaires.
J'ai 14*7 luminaires, dont l'état (allumés ou éteint) est reparti dans 14 tableaux de 7 éléments.
J'ai construit une requête AJAX qui lance un script PHP pour allumer ou éteindre un luminaire selon le bouton cliqué sans avoir à recharger ma page entière.
Tout ceci fonctionne bien.
Maintenant, je voudrai modifier le nom du bouton et sa couleur selon l'état du luminaire.
J'ai donc pondu ceci:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Commandes</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/jquery-ui-1.12.1/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>$( ".button" ).button();</script>
<script type="text/javascript">
$(document).ready(function()
{
$("[class=sortie]").click(function()
{
var name = $(this).attr('name'); // Recuperation du nom du bouton cliqué
var adr = name.substr(1,1); // Extraction de l'adresse de départ (1 chiffre)
var bit = name.substr(2,1); // Extraction du bit à modifier
$.ajax( // Requete ajax
{
type: 'POST',
url: 'ecriture_Q.php',
data : {adr : adr, bit : bit},
});
});
});
</script>
</head>
<body>
<?php
# Lecture de l'API et affectations dans des tableaux
exec('python ./script/lecture_Q.py',$TabQ);
# Boucle pour les sorties (A0 à A13)
for ($j = 0; $j <= 13; $j++)
{
$TabNom = 'TabQ'.$j; # Construction du nom des tableaux par bytes
for ($i = 0; $i <= 7; $i++)
{
# ${$TabNom} >> Permet d'utiliser la valeur de $TabNom comme variable.(Variable dynamique!)
# -7 car substr compte depuis le début de la chaine alors que le bit 0 est à la fin
${$TabNom}[$i] = substr($TabQ[$j], 7 - $i, 1);
}
}
?>
<div>
<fieldset>
<legend>Salon</legend>
<div class='<?php if($TabQ0[1]=="1") { echo "true"; } else { echo "false"; }?>'>
Spot arrière gauche <br/>
<button class="sortie" name="q01"><?php if($TabQ0[1]=="1") { echo "Eteindre"; } else { echo "Allumer"; }?></button><br>
</div>
</fieldset>
</body>
</html> |
Ca fonctionne, j’atterris sur ma page et si le luminaire est éteint, le bouton indique "Allumer" avec une case rouge à coté qui donne l'état actuel.
Lorsque je clique sur mon bouton, rien ne se passe coté CSS (forcement, le code PHP à été executé au chargement), pour voir le changement de mise en page, je dois actualiser la page entière.
J'ai tenté d'externaliser le div "salon" et de l'actualiser à la condition de succès de ma requête AJAX, comme ceci:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Commandes</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/jquery-ui-1.12.1/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>$( ".button" ).button();</script>
<script type="text/javascript">
$(document).ready(function()
{
$("[class=sortie]").click(function()
{
var name = $(this).attr('name'); // Recuperation du nom du bouton cliqué
var adr = name.substr(1,1); // Extraction de l'adresse de départ (1 chiffre)
var bit = name.substr(2,1); // Extraction du bit à modifier
$.ajax( // Requete ajax
{
type: 'POST',
url: 'ecriture_Q.php',
data : {adr : adr, bit : bit},
success : function(resultat)
{
$('#salon').load('salon.php');
}
});
});
});
</script>
</head>
<body>
<?php
# Lecture de l'API et affectations dans des tableaux
exec('python ./script/lecture_Q.py',$TabQ);
# Boucle pour les sorties (A0 à A13)
for ($j = 0; $j <= 13; $j++)
{
$TabNom = 'TabQ'.$j; # Construction du nom des tableaux par bytes
for ($i = 0; $i <= 7; $i++)
{
# ${$TabNom} >> Permet d'utiliser la valeur de $TabNom comme variable.(Variable dynamique!)
# -7 car substr compte depuis le début de la chaine alors que le bit 0 est à la fin
${$TabNom}[$i] = substr($TabQ[$j], 7 - $i, 1);
}
}
?>
<div id='salon'>
<fieldset>
<legend>Salon</legend>
<div class='<?php if($TabQ0[1]=="1") { echo "true"; } else { echo "false"; }?>'>
Spot arrière gauche <br/>
<button class="sortie" name="q01"><?php if($TabQ0[1]=="1") { echo "Eteindre"; } else { echo "Allumer"; }?></button><br>
</div>
</fieldset>
</body>
</html> |
Et ça fonctionne... mais une fois, et le pire c'est que mon bouton ensuite n'execute plus la requête lorsque je clique dessus. J'imagine que c'est du au fait que mon salon.php ne contient que le div et n'a donc pas de lien avec jQuery? salon.php n'hérite pas des liens de la page appelante?
Au début je voulais ré-executer mon exec PHP et la boucle pour rafraîchir l'état, mais au final l'injection des div me parait plus évident et moins dégueulasse.
J'avoue patauger pas mal.
En gros, je souhaite commander mon luminaires par mon bouton en asynchrone, est lorsque je le fait, que son intitulé change en asynchrone également.
Est ce possible?
Merci d'avance.
