Discussion :

[B1warlord]

Bonjour,

Je suis en train de créer un site web pour une communauté de joueur et je cherche à faire un tableau dynamique comme ici.

On double clique dans la cellule, une zone pour éditer le texte apparait, une fois fini on appuie sur entrée et le contenu de la cellule a changé et la base de donnée a été éditée. J'ai trouvé un merveilleux tuto ici que j'ai suivi à la lettre et au final malheur... rien ne se passe... Le rectangle pour éditer le texte n'apparait pas et je ne trouve pas la solution. La fonction ondblclick fonction très bien je l'ai testé avec un alert mais j'ai l'impression quelle ne va jamais chercher la fonction inlineMod située dans le script....

Voici mon fichier inlinemod.js :

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
function inlineMod(id, obj, nomValeur, type)
{
	if(editionEnCours)
	{
		return false;
	}
	else
	{
		editionEnCours = true;
		sauve = false;
	}
 
	//Objet servant à l'édition de la valeur dans la page
	var input = null;
 
	//On crée un composant différent selon le type de la valeur à modifier
	switch(type)
	{
		//Valeur de type texte ou nombre
		case "texte":
		case "nombre":
			input = document.createElement("input");
			break;
 
		//Valeur de type texte multilignes
		case  "texte-multi":
			input = document.createElement("textarea");
			break;
	}
 
	//Assignation de la valeur
	if (obj.innerText)
		input.value = obj.innerText;
	else
		input.value = obj.textContent;
 
	input.value = trim(input.value);
 
	//On lui donne une taille un peu plus large que le texte à modifier
	input.style.width  = getTextWidth(input.value) + 30 + "px";
 
	//Remplacement du texte par notre objet input
	obj.replaceChild(input, obj.firstChild);
 
	//On donne le focus à l'input et on sélectionne le texte qu'il contient
	input.focus();
	input.select();
 
	//Assignation des deux événements qui déclencheront la sauvegarde de la valeur
 
	//Sortie de l'input
	input.onblur = function sortir()
	{
		sauverMod(id, obj, nomValeur, input.value, type);
		delete input;
	};
 
	//Appui sur la touche Entrée
	input.onkeydown = function keyDown(event)
	{
        if (!event&&window.event)
        {
            event = window.event;
        }
		if(getKeyCode(event) == 13)
        {
			sauverMod(id, obj, nomValeur, input.value, type);
			delete input;
		}
	};
}

Et ici ma partie HTML :

Code :

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

1
2
3
<script type="text/javascript" src="./inlinemod.js"></script>
 
<td class="cellule" ondblclick="inlineMod(<?php echo $user['ID']; ?>, this, '10l', 'texte-multi');"><?php echo $user['10l']; ?>&nsbp</td>

10l étant le nom de ma colonne SQL, et l'ID est le nom de la personne de la base a qui la modification s'applique.

Merci aux âmes charitables qui prendront le temps de m'aider dans mon projet.
B1

[Invité]

Mon système quand je fais ça, c'est :

. Lors du clic sur une ligne, récupérer l'ID de l'objet
. Avec cet ID, créer une requête AJAX POST avec angularJs ou Jquery avec pour paramêtre l'ID
. PHP exécute ensuite une requête SQL avec un WHERE id=".$data->id." ";
. Il retourne le résultat au format JSON, et tu peux l'injecter dans ton formulaire de modification .

AngularJs est super pour ça. Je ne peux rien dire de plus, je ne voudrais pas le faire en pur js.

[ABCIWEB]

1/ Mets par exemple des alert('ok') ou console.log('ok') à différents endroits de ton script pour voir où le code passe et ne passe pas.

2/ Utilises l'outil développement de ton navigateur que l'on ouvre avec la touche F12
- L'onglet "console" t'affichera les erreurs et/ou les résultats de console.log().
- L'onglet "réseau" te permettra de voir les requêtes, et notamment pour ton script la requête ajax vers le fichier "sauverMod.php" (d'après le tuto).

Bref faut apprendre à débuguer en faisant des tests et utiliser ces outils pour contrôler ce qui se passe

[B1warlord]

Voilà ma fonction sauverMod :

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
function sauverMod(id, obj, nomValeur, valeur, type)
{
	//Si on a déjà sauvé la valeur en cours, on sort
	if(sauve)
	{
		return false;
	}
	else
	{
		sauve = true;		
	}
 
	//Si l'objet existe déjà on abandonne la requête et on le supprime
	if(XHR && XHR.readyState != 0)
	{
		XHR.abort();
		delete XHR;
	}
 
	//Création de l'objet XMLHTTPRequest
	XHR = getXMLHTTP();
 
	if(!XHR)
	{
		return false;
	}
 
	//URL du script de sauvegarde auquel on passe la valeur à modifier
	XHR.open("GET", "sauverMod.php?id=" + id + "&champ=" + nomValeur + "&valeur=" + escape(valeur) + "&type=" + type + 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)
		{
			//Réinitialisation de la variable d'état d'édition
			editionEnCours = false;
 
			//Remplacement de l'input par le texte qu'il contient
			obj.replaceChild(document.createTextNode(valeur), obj.firstChild);
		}
	}
 
	//Envoi de la requête
	XHR.send(null);
}

Cette fonction semble bien fonctionner mais voilà le contenu de mon fichier sauverMod.php et je pense que c'est la dedans que ça coince :

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
<?php 
 
//On sort en cas de paramètre manquant ou invalide
  if(empty($_GET['id']) or empty($_GET['type']) or empty($_GET['champ']) or empty($_GET['valeur'])
  or !is_numeric($_GET['id'])
  or !in_array(
  $_GET['champ'],
  array('10l', '10m', '10a', '10t', '8l', '8m', '8s', '8a', '8t', '6l', '6m', '6s', '6a', '6t')
  // array avec les noms des champs de la table
  ))
  {
  exit;
  }
 
 //Construction de la requête en fonction du type de valeur
  switch($_GET['type'])
  {
  case 'texte':
  case 'texte-multi':
  mysql_select_db($database_ma_connexion, $ma_connexion);
  $sql  = 'UPDATE ' `u551681479_mbrs`.`listing`;
  $sql .= ' SET ' . mysql_real_escape_string($_GET['champ']) . '="';
  $sql .= mysql_real_escape_string($_GET['valeur']) . '" WHERE id=' . intval($_GET['id']);
  break;
 
 case 'nombre':
  mysql_select_db($database_ma_connexion, $ma_connexion);
  $sql  = 'UPDATE ' `u551681479_mbrs`.`listing`;
  $sql .= ' SET ' . mysql_real_escape_string($_GET['champ']) . '=' . intval($_GET['valeur']);
  $sql .= ' WHERE id=' . intval($_GET['id']);
  break;
 default:
  exit;
  }
  //Exécution de la requête
  mysql_query($sql) or die(mysql_error());
  mysql_close($ma_connexion);
  ?>

La requête UPDATE ne fonctionne pas

[ABCIWEB]

Pour savoir si ta requête ajax fonctionne, touche F12 pour afficher l'outil de développement, ensuite onglet "Réseau". En validant la modification tu dois donc voir une dernière requête vers "sauverMod.php" avec un status (état) 200 qui témoigne que ta requête à bien été envoyée.

Ensuite tu clique sur la ligne de cette requête ce qui t'affichera une fenêtre avec différents onglets. Vérifie dans l'onglet "paramètres" que tous les paramètres sont bien remplis avec les valeurs attendues. L'onglet "Réponse" te permet de contrôler le retour ajax mais comme pour l'instant tu ne fais rien afficher en retour dans le php tu ne verras rien si tout est ok (une bonne idée serait de tester ta requête et de faire afficher une valeur témoignant que tout s'est bien passé) mais tu pourrais voir les erreurs php qui s'affichent en retour si tu les fait afficher dans ton code php.

Quand tu auras vérifié ces points (status ok + paramètres ok), tu seras certain que ta requête est ok (sembler ne suffit pas) et que le problème vient du côté de ton script php.

Enfin dans tous les cas ton script php est à changer car il utilise mysql qui est dépréciée depuis php 5.5 et supprimée avec php7. Donc évidemment si tu utilises php7... Utilises PDO avec des requêtes préparées qui permettent une bonne sécurité pour les requêtes contenant des données utilisateur.

Voilà travaille par étapes que tu contrôle une à une et suit le tuto pdo pour ne plus utiliser l'extension mysql.

Note : côté php, pour éviter des tests fastidieux avec tout le processus à refaire à chaque fois, on teste généralement le script séparément en lui fournissant directement des valeurs.

[B1warlord]

Je travaille en PHP 5.4

Au final en réfléchissant ça fonctionne enfin, j'arrive à éditer ma BDD. Cependant je n'arrive à faire qu'une ou deux éditions et après il faut réactualiser la page...

Je vais continuer de chercher.