Discussion :

[susumu]

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

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

[susumu]

bon j'en balance en fait:

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

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
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 = "";
}

[susumu]

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

Code :

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

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

[NoSmoking]

Bonjour,

à l'appuie du bouton Modifier,

événement onclick

lorsque qu'une checkbox est sélectionnée

teste si la checkbox est checked dans la fonction

[susumu]

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 :

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

[NoSmoking]

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.

[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"

[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())

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

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

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 :

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

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.

[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.

[NoSmoking]

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.

[susumu]

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

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

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 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
<?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..

[NoSmoking]

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

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

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 :

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

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.

[susumu]

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

Code javascript :

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

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 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
<?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) ?

[NoSmoking]

Attention à l'écriture

Code php :

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

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

et non

Code php :

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

<tr id="user-<?php echo $user['idutil']; ?>"> <!-- ici TIRET -->

[susumu]

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

[susumu]

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

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

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

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

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

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

Code javascript :

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

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

qui est mal écrit ?

[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
http://www.developpez.net/forums/f44...donnees/mysql/

[susumu]

Le forum Ajax est pas plus conseillé pour mon problème ?

[NoSmoking]

Pas forcément!
Si ton objet XHR et bien instancié, pas de raison.

Pas besoin de ta fonction ieTrick

Code :

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

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

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

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 ...