Bouton permettant la modification d'une ligne d'un tableau

Version imprimable

30/10/2013, 12h25
susumu

Bouton permettant la modification d'une ligne d'un tableau

Bonjour à tous,

Oui je traîne pas mal dans le coin en ce moment.. Aujourd'hui j'ai une nouvelle problématique à vous proposer:

J'ai suivi un tuto (http://olance.developpez.com/article...cation-inline/), et j'en ai adapté le code pour qu'il fonctionne avec ma base de données. Toutes les fonctionnalités proposées par le tuto fonctionnent.
En double cliquant sur un champ, l'utilisateur peut modifier le contenu et ce contenu est modifié dans la base de données. Exemple ici:http://olance.developpez.com/article...nline/exemple/

C'est très bien tout ça mais c'est pas exactement ce que je veux et je n'arrive pas à adapter mon besoin..
Je voudrais que lorsque une checkbox est cochée, si l'utilisateur appuie sur le bouton modifier, la ligne séléctionnée devienne disponible à l'utilisateur et qu'il puisse la modifier à sa guise.
Voilà ce que donne mon test jusque là:http://imageshack.us/photo/my-images/7/s3zq.jpg/

Si certains parmi vous peuvent m'expliquer comment faire cela, ça m'arrangerait :zoubi:

S'il vous faut un peu de code, demandez =)

bon j'en balance en fait:

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
<div id="actions">	
	<div id="action">
		<form name='formulaire' > 
			<input type="button" style='width: 98%; height: 50px;font-size:16px;' name="ajoutmem" value="Ajouter membre" onclick="ajoutmembre()'" style="background-color:#3cb371" style="color:white; font-weight:bold"onclick>
			<br/>
			<input type="button" style='width: 98%; height: 50px;font-size:16px;' name="modmem" value="Modifier membre" onclick="modmembre()" style="background-color:#3cb371" style="color:white; font-weight:bold"onclick>
			<br/>
			<input type="button"style='width: 98%; height: 50px;font-size:16px;'  name="suppmem" value="Supprimer membre" onclick="supprmembre()" style="background-color:#3cb371" style="color:white; font-weight:bold"onclick>
			<br/>
			<input type="button"style='width: 98%; height: 50px;font-size:16px;'  name="exp" value="Export vers Excel" onclick="exp()'" style="background-color:#3cb371" style="color:white; font-weight:bold"disabled>
		</form>
	</div>
</div>
<div id="erreur"></div>
<br/>
<br/>
<div id="tableaumembre">
	<table>
	<thead> <!-- En-tÃ?Âªte du tableau -->
		<tr id="tab">
			<th><input type="checkbox" onClick="active()" name="sa"/> S.A</th>
			<th>ID</th>
			<th>Login</th>
			<th>Mot de passe</th>
			<th>Nom</th>
			<th>Groupe</th>
			<th>Commentaires</th>
		</tr>
	</thead>
	<tbody> <!-- Corps du tableau -->
<?php
while ($user = mysql_fetch_assoc($result))
{?>
		<tr id="membre">
			<td><INPUT type="checkbox" name="foo" value="1" onClick="active()"></td>
			<td id="idutil-<?php echo $user['idutil']; ?>"  class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'idutil', 'Nombre')"><?php echo $user['idutil']; ?></td>
			<td id="loginutil-<?php echo $user['idutil']; ?>"  class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'loginutil', 'Texte')"><?php echo $user['loginutil']; ?></td>
			<td id="passutil-<?php echo $user['idutil']; ?>"  class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'passutil', 'Texte')"><?php echo $user['passutil']; ?></td>
			<td id="nomutil-<?php echo $user['idutil']; ?>"  class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'nomutil', 'Texte')"><?php echo $user['nomutil']; ?></td>
			<td id="groupeutil-<?php echo $user['idutil']; ?>"  class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'groupeutil', 'Texte')"><?php echo $user['groupeutil']; ?></td>
			<td id="commentairesutil-<?php echo $user['idutil']; ?>"  class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'commentairesutil', 'TexteMulti')"><?php echo $user['commentairesutil']; ?></td>
		</tr>
<?php
}
?>
	</tbody>
	</table>
</div>

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
function getTextWidth(texte)
{
	//Valeur par défaut : 150 pixels
	var largeur = 150;
 
	if(trim(texte) == "")
	{
		return largeur;
	}
 
	//Création d'un span caché que l'on "mesurera"
	var span = document.createElement("span");
	span.style.visibility = "hidden";
	span.style.position = "absolute";
 
	//Ajout du texte dans le span puis du span dans le corps de la page
	span.appendChild(document.createTextNode(texte));
	document.getElementsByTagName("body")[0].appendChild(span);
 
	//Largeur du texte
	largeur = span.offsetWidth;
 
	//Suppression du span
	document.getElementsByTagName("body")[0].removeChild(span);
	span = null;
 
	return largeur;
}
 
	//URL du script de sauvegarde auquel on passe la requête à exécuter
	XHR.open("GET", "sauverMod.php?champ=" + escape(champ.nomChamp) + "&valeur=" + escape(champ.getValeur()) + "&echap=" + champ.echaperValeur() + "&id=" + champ.id + ieTrick(), true);
 
	//On se sert de l'événement OnReadyStateChange pour supprimer l'input et le replacer par son contenu
	XHR.onreadystatechange = function()
	{
		//Si le chargement est terminé
		if (XHR.readyState == 4)
			if(!XHR.responseText)
			{
				//Réinitialisation de la variable d'état d'édition
				editionEnCours = false;
 
				//Sortie du mode d'édition
				champ.terminerEdition();
 
				//Réinitialisation de l'affichage d'erreur
				document.getElementById("erreur").innerHTML = "";
 
				return true;
			}
			else //S'il y a une réponse texte, c'est une erreur PHP
			{
				//Affichage de l'erreur
				document.getElementById("erreur").innerHTML = XHR.responseText;
				sauve = false;
				return false;
			}
	}
 
	//Envoi de la requête
	XHR.send(null);
}
 
Texte.prototype.activerChamp = function ()
{
	input.focus();
	input.select();
}
 
//Fonction de sortie du mode d'édition
Texte.prototype.terminerEdition = function ()
{
	this.parent.replaceChild(document.createTextNode(input.value), this.parent.firstChild);
	delete input;
}
 
//Fonction déterminant si la valeur passée au script PHP doit être formatée par celui-ci ou pas (avec mysql_real_escape_string($str);)
//Ici oui, car il s'agit de texte
Texte.prototype.echaperValeur = function ()
{
	return "true";
}
 
function Texte()
{
	this.id = -1;
	this.valeur = "";
	this.nomChamp = "";
	this.parent = null;
	this.texteErreur = "";
}

04/11/2013, 10h40
susumu

On va faire plus simple: Ce que je veux c'est comprendre comment faire pour qu'au lieu de

Code:

ondblclick="inlineMod(<?php echo $user['idutil'];

pour chaque champ du tableau, lorsque qu'une checkbox est sélectionnée, à l'appuie du bouton Modifier, toute la ligne sélectionnée soit en "inlineMod" ?

Merci d'avance,
Susumu
04/11/2013, 10h49
NoSmoking

Bonjour,

Citation:

à l'appuie du bouton Modifier,

événement onclick

Citation:

lorsque qu'une checkbox est sélectionnée

teste si la checkbox est checked dans la fonction

Bonjour,

J'ai crée une fonction active qui permet d'avoir le bouton activé uniquement quand une (et une seule) checkbox est cochée:
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 function active(){ checkboxes = document.getElementsByName('foo'); compt = 0; for(var i=0, n=checkboxes.length;i<n;i++) { if(checkboxes[i].checked){ compt = 1; nb = nb++; if(nb=1){ document.forms['formulaire'].exc.disabled=false; document.forms['formulaire'].modmem.disabled=false; document.forms['formulaire'].suppmem.disabled=false; } else { document.forms['formulaire'].exc.disabled=true; document.forms['formulaire'].modmem.disabled=true; document.forms['formulaire'].suppmem.disabled=true; } } } if(compt==0){ nb=0; document.forms['formulaire'].exc.disabled=true; document.forms['formulaire'].modmem.disabled=true; document.forms['formulaire'].suppmem.disabled=true; } }
"modmem" étant le bouton de modification, "suppmem" le bouton de suppression et exc l'export vers excel (qui lui est activé même si plusieurs checkbox sont cochées)
Donc lors du lancement de la fonction Modif, la checkbox est forcément cochée :) par contre je récup pas l'id de celle-ci :/

04/11/2013, 13h33
NoSmoking

Citation:

Donc lors du lancement de la fonction Modif, la checkbox est forcément cochée :) par contre je récup pas l'id de celle-ci :/

J'ai du mal à saisir le besoin.
04/11/2013, 14h10
susumu

Le besoin de mettre le bouton inactif avant la sélection d'une checkbox ou le besoin de récup l'id de la checkbox ?

Dans le premier cas, j'ai une checkbox séléctionner tout, j'ai pas envie que si un mec fait sélectionner tout et "supprimer" par erreur, il vide la table :/
Et ça permet à l'utilisateur de comprendre qu'il faut sélectionner une seule checkbox pour modifier et/ou supprimer.

Dans le second cas, faudra bien (enfin j'imagine, c'est ce que j'arrive pas à me figurer) que je dise en javascript: "pour la ligne où la checkbox est sélectionnée, tu me permets la modification des champs"
04/11/2013, 14h17
susumu

Si je suis pas clair ou que t'as besoin de code dis moi parce que je galère dessus depuis plus d'une semaine donc y'a des chances que je sois flou..

Pour l'instant, le bouton modifier par exemple, comme ça un seul cas. La fonction associée à ce bouton doit modifier la ligne selon la checkbox sélectionnée (c'est sûr que y'a qu'une checkbox sélectionnée grâce à la fonction active())
04/11/2013, 17h10
NoSmoking
La fonction de modification ne pouvant se lancer que sur action "vérouillée" du bouton une seule checkbox est donc cochée.

Il te suffit donc de récupérer la checkbox cochée et cela te donnera son index ou encore la TR concernée.

par exemple
Code:

1 2 3 4 5 6 var oCheck = document.getElementsByName('foo'); for( i=0; i < oCheck.length; i++){ if( oCheck[i].checked){ alert( 'Ligne n°'+ i +' est sélectionnée'); } }
sinon en utilisant parentNode
Code:

1 2 3 if( oCheck[i].checked){ var oTR = oCheck[i].parentNode.parentNode; // remonte TD puis TR }
nota: ne passe pas par des ID sur tes TR qui sont identiques dans ton code HTML.
05/11/2013, 10h19
susumu

Ok donc grâce à ce que tu m'as donné, je sais désormais quelle ligne il faut modifier.

Maintenant comment je permet à la fonction "d'ouvrir" tous les champs de la ligne (permettre la modif) et d'enregistrer, si modif, dans la base de données ?
Comme je l'ai dis mon code permet pour l'instant de modifier champ par champ après double clique sur le champ.

Je débute en javascript (et encore plus Ajax) donc jt'avoue que j'ai juste adapté mon code au tuto et que j'ai compris en gros le principe, mais je comprend pas commence permettre ce que je te demande à l'appuie du bouton.

Merci pour l'aide en tout cas, c'est bien gentil de ta part.
05/11/2013, 11h52
NoSmoking

Citation:

Maintenant comment je permet à la fonction "d'ouvrir" tous les champs de la ligne (permettre la modif)

pourquoi vouloir ouvrir tous les champs, il suffit d'ouvrir celui qui reçoit un click ou un dblclick.

Dans le principe il te suffurait de mettre un indicateur sur la ligne si elle est active, checkbox cochée, et de tester celui ci sur le click de tes éléments en utilisant la remontée dans le DOM via parentNode.

Une autre approche, qui me semblerait plus justifiée ici, est la délégation d'événements, d’autant que tu peux créer des éléments dynamiquement.

Effectivement dis comme ça, je me demande pourquoi je m'obstinais avec ce bouton T.T

Jvais garder ce que j'ai, ça devrait amplement suffire ! Donc ce problème est résolu (fallait juste me convaincre de ma connerie..)

Par contre (sinon c'est pas drôle), je me demandais comment créer un bouton supprimer qui supprime la ligne sélectionnée (avec la checkbox)
J'ai crée une fonction qui n'a l'air de faire absolument rien mais jvous montre le code quand même:

côté Javascript
Code:

1 2 3 4 5 6 7 function supprmembre(){ var oCheck = document.getElementsByName('foo'); for( i=0; i < oCheck.length; i++){ if( oCheck[i].checked){ XHR.open("GET", "supp.php?id=" + champ.id + ieTrick(), true); } }
supp.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php require('./common-top.php'); //Construction de la requête $id = $_GET['id']; $sql = "DELETE FROM utilisateurs where idutil=$id"; //Il faut éventuellement formater la valeur fournie //Exécution de la requête mysql_query($sql) or die("Erreur BDD : " . mysql_error()); require('./common-bottom.php'); ?>
common-top contenant la connexion à la BD et common-bottom la fermeture de la requête.
J'imagine que c'est "champ.id" qui va pas (entre autres), mais je sais pas quoi mettre à la place..

Je pense, pour commencer, qu'il faut que tu revois la façon de construire ta page.
On a pu voir que dans la boucle tu affectais à la TR la même ID ce qui est à proscrire.
Dans ton cas il serait intéressant que tu lui affectes l'ID de ton user, un truc dans le style
Code:

1 2 3 4 5 6 7 8 9 10 <?php while ($user = mysql_fetch_assoc($result)) {?> <tr id="user_<?php echo $user['idutil']; ?>"> <td><input type="checkbox" name="foo" value="1" onclick="active()"></td> <td class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'idutil', 'Nombre')"><?php echo $user['idutil']; ?></td> </tr> <?php } ?>
il te seras de la sorte plus simple de récupérer l'ID en remontant
Code:

1 2 3 4 if( oCheck[i].checked){ var oTR = oCheck[i].parentNode.parentNode; // remonte TD puis TR var numUser = oTR.id.split('_')[1]; // sera égal à 'idutil' }
Le reste devrait devenir plus facile.

Alors voilà ce que donne ma fonction supprmembre après avoir suivi tes conseils

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function supprmembre(){
var oCheck = document.getElementsByName('foo');
	for( i=0; i < oCheck.length; i++){
	  if( oCheck[i].checked){
	var oTR = oCheck[i].parentNode.parentNode; // remonte TD puis TR
 
	var numUser = oTR.id.split('_')[1]; 
	alert(numUser);	// sera égal à 'idutil'
	XHR.open("GET", "supp.php?id=" + numUser + ieTrick(), true);
		}
	}
}

Le alert me retourne "undefined" :/

Mon tableau donne ça après modification

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
while ($user = mysql_fetch_assoc($result))
{?>
   <tr id="user-<?php echo $user['idutil']; ?>">
	   <td style="height:50px"><INPUT type="checkbox" name="foo" value="1" onClick="active()"></td>
	   <td  style="height:50px" class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'idutil', 'Nombre')"><?php echo $user['idutil']; ?></td>
	   <td  style="height:50px" class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'loginutil', 'Texte')"><?php echo $user['loginutil']; ?></td>
	   <td  style="height:50px" class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'passutil', 'Texte')"><?php echo $user['passutil']; ?></td>
	   <td  style="height:50px" class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'nomutil', 'Texte')"><?php echo $user['nomutil']; ?></td>
	   <td  style="height:50px" class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'groupeutil', 'Texte')"><?php echo $user['groupeutil']; ?></td>
	   <td  style="height:50px" class="cellule" ondblclick="inlineMod(<?php echo $user['idutil']; ?>, this, 'commentairesutil', 'TexteMulti')"><?php echo $user['commentairesutil']; ?></td>
   </tr>
 <?php
}
?>

Qu'est ce que je rate (encore) ?

05/11/2013, 19h02
NoSmoking

Attention à l'écriture

Code:

<tr id="user_<?php echo $user['idutil']; ?>"> 

et non

Code:

<tr id="user-<?php echo $user['idutil']; ?>"> 
05/11/2013, 19h35
susumu

Ah possible que j'ai modifié ça avant de rectifier une autre bétise.. Je te confirme ça demain matin :ccool:

Alors j'ai modifié, il me donne bien le bon id maintenant ! Mais la suppression ne fonctionne pas..

J'ai essayé en enlevant l'ieTrick(), toujours pas de résultat
Voilà le code de l'ieTrick() si ça intéresse
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ieTrick(sep) { d = new Date(); trick = d.getYear() + "ie" + d.getMonth() + "t" + d.getDate() + "r" + d.getHours() + "i" + d.getMinutes() + "c" + d.getSeconds() + "k" + d.getMilliseconds(); if (sep != "?") { sep = "&"; } return sep + "ietrick=" + trick; }
j'ai même essayé

Code:

$sql = "DELETE FROM utilisateurs where idutil=3";

en désespoir de cause mais aucune réaction..
C'est donc mon

Code:

XHR.open("GET", "supp.php?id=" + numUser + ieTrick(), true);

qui est mal écrit ?

07/11/2013, 09h55
NoSmoking

Ton problème est un problème coté serveur et non plus coté client, il existe des forums dédiés qui te renseigneront mieux
:fleche: http://www.developpez.net/forums/f44...donnees/mysql/
07/11/2013, 17h13
susumu

Le forum Ajax est pas plus conseillé pour mon problème ?
07/11/2013, 18h20
NoSmoking
Pas forcément!
Si ton objet XHR et bien instancié, pas de raison.

Pas besoin de ta fonction ieTrick

Code:

XHR.open("GET", "supp.php?id=" +numUser +"&cache=" +new Date().getTime(), true);

Coté serveur si les données reçues sont les bonnes alors Ajax isOK. Tu peux t'en assuré via un
Code:

1 2 3 4 $Recup = $_GET; if(!empty($Recup)){ var_dump($Recup); }
si les données affichés correspondent vérifies le type des données INT, VARCHAR ...
08/11/2013, 11h01
susumu
J'ai essayé avec sauverMod et il me retourne
```
array (size=5)
  'champ' => string 'nomutil' (length=7)
  'valeur' => string 'rty$' (length=4)
  'echap' => string 'true' (length=4)
  'id' => string '4' (length=1)
  'ietrick' => string '113ie10t8r10i59c43k56' (length=21)
```
par contre rien de retourné avec supp.php.. Je tente ma chance sur le forum mysql ?

Merci en tout cas pour ton aide, ça aide à pas péter un câble :mouarf:
08/11/2013, 11h20
NoSmoking

Citation:

par contre rien de retourné avec supp.php

si tu ne reçois rien dans ton fichier supp.php, c'est que tu ne l’appelles peux être pas.
08/11/2013, 11h30
susumu

exactement ce que je viens de remarquer, j'avais pas mis le

Code:

XHR = getXMLHTTP();

dans la function, donc jme dis "ah mais jsuis con c'est pour ça qu'il affiche rien" et en fait il affiche toujours rien x) mais c'est déjà mieux
08/11/2013, 15h01
NoSmoking

Citation:

Envoyé par NoSmoking

Si ton objet XHR et bien instancié, pas de raison.

c'est effectivement le moindre des besoins, comme de mettre une réponse en retour pour indiquer que la suppression, la requête en règle générale, c'est bien passée.

(première fois que je me sers d'Ajax, j'avoue être un peu pathétique)
Maintenant ma fonction instancie bien la variable XHR, fait l'open, et est envoyée.
Est ce que j'ai besoin d'un onreadystatchange pour l'instant ou j'en aurai besoin uniquement pour enlever la ligne supprimée ?

Voilà le code de la fonction, j'imagine qu'il manque toujours quelque chose:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function supprmembre(){ XHR = getXMLHTTP(); var oCheck = document.getElementsByName('foo'); for( i=0; i < oCheck.length; i++){ if( oCheck[i].checked){ var oTR = oCheck[i].parentNode.parentNode; // remonte TD puis TR var numUser = oTR.id.split('_')[1]; // sera égal à 'idutil' XHR.open("GET", "supp.php?id=" +numUser +"&cache=" +new Date().getTime(), true); XHR.send(null); alert("Le membre ayant pour id"+numUser+" a été supprimé"); } } }

08/11/2013, 15h59
NoSmoking

Tu n'es jamais obligé de te servir de la réponse surtout si il n'y en a pas, sauf que dans ton cas il faut bien, coté client, être sûr que la requête c'est bien passée et c'est donc la fonction en retour que tu gères cela.

Par exemple dans ton code, ton alert("Le membre ayant pour id"+numUser+" a été supprimé"); est à mettre dans cette fonction callback et tu pourras même en profiter la ligne de ta TABLE devenue parfaitement inutile.
12/11/2013, 11h10
susumu

Ouais je vois le procédé, donc à la suite du send je crée dans la fonction supprmembre une fonction callback qui vérifie le résultat du send c'est ça ?
(j'arrive toujours pas à avoir de réponse de supp.php mais autant avancer sur autre chose que de rester bloqué)
13/11/2013, 10h41
susumu

Bon après 1 bonne semaine à m'arracher les cheveux, je me suis rendu compte que la requête SQL était mal écrite T.T voilà ce qu'elle donne si ça en intéresse:

Code:

$sql = 'DELETE FROM `'.$_SESSION['BD'].'` WHERE idutil="'.$id.'"';

La suppression fonctionne, je suis bien content, merci à NoSmoking pour sa patience.