Discussion :

[danieldou]

Salut à tous,

J'essaie de développer un petit système semblable a excel en version web : j'ai un tableau et je veux que lorsque je change la valeur d'une case, que ça s'enregistre dans la BDD
Pour ça je compte utiliser Ajax.

Le tableau se présente sous forme de liste qui est générée depuis la BDD (j'utilise donc une boucle en PHP pour générer le nombre de lignes nécessaires)
J'ai déjà développé l'idée mais je bloque sur un soucis : lorsque je récupère la valeur de la case pour la passer en POST, le script ne récupère que la valeur de la première case de la première ligne
je pense qu'a cause du fait que ces lignes soient générées en boucle, les id sont donc identiques pour chaque ligne et le script Javascript ne parvient donc pas a cibler précisément la case que je veux

Auriez vous une idée pour résoudre ce problème ?

Voila mon code PHP :

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
$req = $db->prepare ( "SELECT * FROM Eleves, D1a WHERE idEleves = idEleve");
	$req->execute ();
	while ( $userRow = $req->fetch ( PDO::FETCH_ASSOC )) {
		echo '<tr>';
		echo '<th>'.$userRow ['nom'].'</th>';
		echo '<th>'.$userRow ['prenom'].'</th>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">francais</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['francais'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">maths</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['maths'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">histoire-geo</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['histoire-geo'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">svt</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['svt'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">techno</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['techno'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">physique</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['physique'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">arts plastiques</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['arts plastiques'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">musique</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['musique'].'"></td>';
		echo '<td><div style="display: none" id="ideleves">'.$userRow['idEleve'].'</div><div style="display: none" id="colonne">eps</div><input class="form-control" type="number" id="champs" onchange="change()" value="'.$userRow ['eps'].'"></td>';
		echo '<th></th>';
		echo '</tr>';
	}

Et Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function change()
{
	var colonne = document.getElementById("colonne").innerHTML;
	var valeur = document.getElementById("champs").value;
	var idEleve = document.getElementById("ideleves").innerHTML;
	objData = { colonne: colonne, valeur: valeur, idEleve: idEleve };
	$.ajax({
		url : './php/synthese.php',
		type : 'POST',
		data : objData,
		dataType : 'html'
	});
}

Merci d'avance

[mathieu]

vous pouvez généré un identifiant unique en utilisant l'identifiant de l'élève pour avoir par exemple "ideleves[1]", "champ[1]"
l'avantages des crochets est que vous obtenez directement un tableau PHP à la réception dans $_POST["champ"]

[danieldou]

Et donc les crochets concrètement je devrais les mettre ou ?

[eleydet]

Bonjour,

Comme vous l'avez constaté, dans votre code, les identifiants "colonne", "champs" et "ideleves" sont utilisés plusieurs fois. Or, dans une page HTML, un identifiant doit être unique. Plusieurs solutions :
1°) Rendre ces identifiants uniques...
2°) Utiliser les propriétés du DOM en s'inspirant, peut-être, du code ci-dessous.

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function test(ligne) { alert(ligne.childNodes[0].innerHTML); }
    </script>
  </head>
  <body>
    <table border="1">
      <tr><td>Ligne 1</td><td onclick="test(this.parentNode);">Cliquez!</td></tr>
      <tr><td>Ligne 2</td><td onclick="test(this.parentNode);">Cliquez!</td></tr>
      <tr><td>Ligne 3</td><td onclick="test(this.parentNode);">Cliquez!</td></tr>
    </table>
  </body>
</html>

[danieldou]

Déjà, rendre ces identifiants uniques ne me parait pas être une bonne solution, sinon je devrais faire du statique coté JavaScript pour récupérer chaque id pour chaque colonne etc..
La deuxième solution me parait plutôt bien
Donc si je comprend bien, en passant en paramètre le "this", je peut cibler le champs sur lequel j'appelle la fonction, et donc pas besoin d'id, je le fais directement en JavaScript ?

[eleydet]

Bonjour,

Au premier abord et à mon avis, les deux solutions sont bonnes. Selon ce que j'aurais à programmer, j'utiliserais tantôt une solution, tantôt l'autre. Dans votre cas, je ne sais pas. En fait, je n'ai pas compris pourquoi vous utilisez des <div style="display: none" ...>.

C'est un autre sujet mais est-il utile de faire une requête ajax à chaque modification? Un bouton "Enregistrer" ne serait-il pas préférable?