Mise à jour CSS suite à la requête ajax

**Brebiou** · 06/11/2017, 18h04

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**mathieu** · 07/11/2017, 10h20

Petite parenthèse, pour accéder à un élément par une classe CSS, vous pouvez utiliser ".sortie" au lieu de "[class=sortie]" (fin de la parenthèse).

Ce comportement se produit parce qu'au chargement de la page, les boutons modifiés n'existaient pas encore et donc "$("[class=sortie]")" ne pouvait pas les trouver.
Donc pour s'accrocher sur un évènement d'un élément qui n'existe pas encore, vous pouvez vous accrocher sur "document" comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).on("click", ".sortie", function () { ...

**Brebiou** · 07/11/2017, 16h03

Merci beaucoup pour la correction de syntaxe.

Effectivement, en m'accrochant sur "document", cela marche à la perfection.

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(document).on("click", ".sortie",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');
		}
	});			
});

Merci encore!

Mise à jour CSS suite à la requête ajax [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager