Tableau dynamique avec bouton de validation

**tduverger** · 30/11/2018, 22h30

Bonjour,
je doit développer un tableau permettant de lire en temps réél les donnée d'une base de donnée et de l'afficher dans un tableau avec un bouton sur chaque ligne permettant de valider la ligne.
Je souhaite développer l'index en html et javascript pour pouvoir l'encapsuler avec cordova pour faire une appli smartphone.

J'ai donc index.html

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
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
<script>
 
function update_data(){
    $.getJSON('http://localhost/supervision/names.php', function (data) {       // fonction de retour, data est le tableau renvoyé par json_encode du php
       console.log(data);
           var tr;
       for (var i = 0; i < data.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + data[i].Num + "</td>");
                        tr.append("<td>" + data[i].Last_Name + "</td>");
                        tr.append("<td>" + data[i].Company + "</td>");
                        tr.append("<td>" + data[i].LastPassDoor + "</td>");
                        tr.append("<td>" + data[i].Quai + "</td>");
                        tr.append("<td>" + "<input type='submit' id='button' value='Valider' />" + "</td>");
                        $('table').append(tr);
                        $("#button").click(function(){
                                $.post("validation.php", {number : data[i].Num});
                        });     
 
                }
        });
}
 
$(document).ready(function(){  
        update_data();
         //setInterval(function(){ update_data()}, 1000); //requete toutes les 1secondes
});
 
 
</script>
 
 
</head>
<body>
<form name="autoriser" method="post" action="index.php">
	<p style="text-align:center">
	<span style="font-size: 18pt;">Liste des camions</span><br>
	</p>
<table class="tableau">
	<thead>
		<tr class="entete">
			<th>Numero RDV</th>
			<th>Nom</th>
			<th>Company</th>
			<th>Status</th>
			<th>Quai</th>
			<th>Valider</th>
		</tr>
	</thead>
</table>
 
</form>
</body>
</html>

et le names.php permettant d'échanger avec le serveur SQL

Code php :

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
<?php 
header("Content-Type: application/json");
 
include('function.php');
$conn = connexion_DB();
// on selectionne les  personnes sur site qui ne sont pas passé par le lecteur de sortie;
$strSQL = "SELECT Num, Last_Name, LastPassDoor FROM rptRollCall WHERE LastPassDoor != 'Lecteur sortie' ";
$result = sqlsrv_query($conn, $strSQL) or die( print_r( sqlsrv_errors(), true));
 
$array = array();
while( $row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
	// On cherche le nom de la company et du quai dans CRDHLD
	$last_name=$row["Last_Name"];
	$SQL = "SELECT Company, Quai FROM CRDHLD WHERE Last_Name='$last_name'";
	$crdhld_result = sqlsrv_query($conn, $SQL) or die( print_r( sqlsrv_errors(), true));
	$row2 = sqlsrv_fetch_array( $crdhld_result, SQLSRV_FETCH_ASSOC);
 
			//on genere le statut et colore les lignes
	switch($row["LastPassDoor"]){
		case "Lecteur entree":
			$status="En entrée";
			$class="ligne_lime";
			break;
		case "Lecteur chargement":
			$status="Chargement / Déchargement";
			$class="ligne_yellow";
			break;
		case "Lecteur sortie":
			$status="En sortie";
			$class="ligne";
			break;
		case NULL:
			$status="Zone d'attente";
			$class="ligne_red";
			break;
	}
 
	$array[] = $row + $row2;
 
}
 
 
echo json_encode($array);
 
sqlsrv_free_stmt($result);
sqlsrv_free_stmt($crdhld_result);
sqlsrv_close ($conn);
?>

Ce code fonctionne et me renvoie les 2 lignes de ma table mais:
- Le bouton input en fin de tableau ne fonctionne pas et me redirige vers une page index.php
- La boucle de mise à jour appelant update_data() affiche 2 lignes supplémentaires toutes les secondes
- Il peut y avoir jusque 10 clients sur ce site et afin de soulager les requetes de names.php vers le serveur SQL, je faire tourner en boucle la lecture de la base dans name.php et stocker les infos dans un tableau que l'index.php viendrait lire. Qu'en pensez vous?

Merci pour votre aide

**NoSmoking** · 01/12/2018, 18h14

Bonjour et bienvenue sur DVP.

- Le bouton input en fin de tableau ne fonctionne pas et me redirige vers une page index.php

Non c'est le comportement normal d'un <input type="submit"> que de soumettre le formulaire, il te faut, si tu ne souhaites pas ce comportement, inhiber l'action par défaut.

Code :

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

1
2
3
4
$(".btn-validation").click(function(event){
   event.preventDefault();
    $.post("validation.php", {number : data[i].Num});
});

Voir : event.preventDefault()

Remarques :

tu dupliques les ID est ça c'est la mal d'autant que tu n'en as pas besoin
il te faut sortir l'ajout de l'événement de ta boucle, il y aura d'autres détails à régler

**tduverger** · 01/12/2018, 21h10

Merci pour ta réponse et pour l'accueil

J'ai modifié, mais je crois que l'appel de fonction est pas bon, je suis débutant en javascript et je ne comprend pas bien $(.btn-validation)

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
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
<script>
//$.getJSON('index.js',
//function(data){
//  console.log(data);
//});
 
$(".btn-validation").click(function(event){
   event.preventDefault();
    $.post("validation.php", {number : data[i].Num});
});
 
function update_data(){
    $.getJSON('http://localhost/supervision/names.php', function (data) {       // fonction de retour, data est le tableau renvoyé par echo du php
       console.log(data);
           var tr;
       for (var i = 0; i < data.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + data[i].Num + "</td>");
                        tr.append("<td>" + data[i].Last_Name + "</td>");
                        tr.append("<td>" + data[i].Company + "</td>");
                        tr.append("<td>" + data[i].LastPassDoor + "</td>");
                        tr.append("<td>" + data[i].Quai + "</td>");
                        tr.append("<td>" + "<button id='btn-validation'>Valider</button>" + "</td>");
                        $('table').append(tr);
                        };      
        });
}
 
$(document).ready(function(){  // on attend que la page soit prete
        update_data();
         //setInterval(function(){ update_data()}, 1000); //requete toutes les 1secondes
});

Qu'entends tu par " tu duplique les ID"?

Merci

**NoSmoking** · 02/12/2018, 10h06

Qu'entends tu par " tu duplique les ID"?

Une ID doit être UNIQUE dans une page, si on a plusieurs éléments à cibler on utilise le plus souvent les class CSS.

... et je ne comprend pas bien $(.btn-validation)

c'est l'écriture pour cibler tous les éléments ayant comme class "btn-validation"

mais je crois que l'appel de fonction est pas bon,

tes éléments étant nouvellement inclus dans le document ils ne font pas partie de ceux pris en compte par ta fonction celle-ci étant déclarée avant qu'ils n'existent, il te faut mettre la fonction dans la fonction de retour de ta requête.

Cela pourrait donner

Code :

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
function update_data() {
  $.getJSON('http://localhost/supervision/names.php', function(data) {
    console.log(data);
    var tr;
    for (var i = 0; i < data.length; i++) {
      tr = $('<tr/>');
      tr.append("<td>" + data[i].Num + "</td>");
      tr.append("<td>" + data[i].Last_Name + "</td>");
      tr.append("<td>" + data[i].Company + "</td>");
      tr.append("<td>" + data[i].LastPassDoor + "</td>");
      tr.append("<td>" + data[i].Quai + "</td>");
      // ici on met une class et non une ID
      // on rajoute une data-num pour la récupération
      tr.append("<td>" + "<button class='btn-validation' data-num='" + data[i].Num + "'>Valider</button>" + "</td>");
      $('table').append(tr);
    };
    // affectation événement sur éléments crées
    $(".btn-validation").on("click", function(event) {
      event.preventDefault();
      $.post("validation.php", {
        //number: data[i].Num
        // remplacement par la récupérartion de data-num
        number: $(this).data("num")
 
      });
    });
  });
}

Quelques modifications faites, à voir dans le code, pour info : .data(), d'une manière générale la documentation jQuery vaut le détour

**tduverger** · 02/12/2018, 18h00

Merci tu as résolu mon problème de bouton.
J'ai cependant toujours mon problème de rafraichissement en effet

Code :

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

1
2
 
setInterval(function(){ update_data()}, 1000);

ne fait que me rajouter les lignes à la suite au lieu de rafraichir tout le tableau

Avant j'avais testé avec

Code :

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

1
2
3
4
5
6
7
8
9
 
   function reloadNames() {
        var url = "names.php?t=" + (new Date()).getTime(); 
        jQuery("#row").load(url);
    }
 
	$(document).ready(function(){  // on attend que la page soit prete
	 setInterval(function(){ reloadNames()}, 1000); //requete toutes les 1secondes
	});

je créé le tableau dans names.php et la fonction reloadNames() s'affichée dans un div
dans ce cas le rafraichissement fonctionnait bien mais plus compliqué avec le bouton
Qu'en penses tu?

**NoSmoking** · 02/12/2018, 18h29

ne fait que me rajouter les lignes à la suite au lieu de rafraichir tout le tableau

c'est ce qui est demandé via cette ligne

Code :

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

$('table').append(tr);

si tu souhaites remplacer le contenu il te faut d'abord « vider » la table

Code :

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

1
2
3
4
5
var laTable = $("table");
// vide la table
laTable.empty();
// et plus loin on la rempli
laTable.append(/* ce que l'on ajoute */);

Voir : .empty()

Tableau dynamique avec bouton de validation

jQuery

Vue hybride

Discussions similaires

Partager

Partager