[AJAX] javascript-ajax & tableau html

**gcgcgc** · 09/06/2010, 10h11

Bonjour,
Je me suis mis au dev web il n'y a pas si longtemps, je suis en train de faire une application web en php, js, ajax, mysql. Mon niveau en HTML CSS est plutot bon, php ca va, et le reste tout juste débutant.
Dans une des parties du projet, j'affiche le contenu de ma BDD dans un tableau HTML, et j'ai trouvé ce tuto qui me permet de faire ce dont j'ai besoin:
http://olance.developpez.com/article...cation-inline/

Permettre de modifier directement les données affichées dans ce tableau: en double-cliquant dans la case correspondante, un champ texte apparait à la place de la cellule du tableau, on écrit une nouvelle valeur et en appuyant sur ok ou quittant la cellule, cela enregistre ce nouveau champ sans recharger la page.

Résultat du tuto ici: http://olance.developpez.com/article...emple/classes/

Le problême est que cela ne marche pas...même pas la partie changement en input quand on double clique dessus, c'est comme si je n'avais pas de js du tout. Et je ne comprend pas pourquoi, et ou peut se trouver le pb...
Je bloque dessus depuis un moment. Et je n'avance pas.

Maintenant, j'ai 2 fichiers: 1php, 1js:

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
<?php session_start() ;  ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Ajout de groupe</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="mod_pole.css" />
   	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../banniere/banniere.css" />
	   <script type="text/javascript" src="inlinemod.js"></script>
 
   </head>
   <body>
 
    <?php
  if (!isset($_SESSION['pseudo']))       //session ouverte ?
  {
        header('Location: '.get_cfg_var("URL_HTTP")."/GDflux/index.php?erreur=authentification");
                }
include("../banniere/banniere.php"); 
                          
                 ?>
 
 
	<?php   
        $host = get_cfg_var("DBHost"); 
        $user = get_cfg_var("DBUserW"); 
        $pass = get_cfg_var("DBPwdW");                      
        $bdd = get_cfg_var("DBName"); 
 
      
        @mysql_connect($host,$user,$pass)                        l
    or die("Impossible de se connecter au serveur");
        @mysql_select_db("$bdd")                                   // sélection 
    or die("Impossible de se connecter à la base de données");
 
        $requete = "SELECT * FROM --BDD--";         
                
                try                                                // récupération 
                {
                        $result = mysql_query($requete);        
                }
                catch (Exception $e)
                {
                        die('Erreur : ' . $e->getMessage());
                }?>
 
 
 
 
<div id="ecran">
    <table id="tab_equipe"BORDER="1" ALIGN="CENTER" CELLPADDING="10" CELLSPACING="1">
	<caption>Modifier Pole</caption>
        <thead><tr>
            <th>Id</th>
            <th>Nom</th>
			</tr></thead>
 
        <?php
        while($user = mysql_fetch_assoc($result))
        {
        ?>
            <tbody><tr>
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'nom', 'nombre')">
                    <?php echo $user['id']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte')">
                    <?php echo $user['nom']; ?>
                </td>
				</tr></tbody>
        <?php
        }
        ?>
    </table>
	</div>
 
   </body>
</html>

Et le fichier js, que j'ai recopié du tuto décrit mais j'ai compris le code.

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
//On ne pourra éditer qu'une valeur à la fois
var editionEnCours = false;
 
//variable évitant une seconde sauvegarde lors de la suppression de l'input
var sauve = false;
 
//Fonction de modification inline de l'élément double-cliqué
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;
		}
	};
}
 
 
 
//Fonction renvoyant le code de la touche appuyée lors d'un événement clavier
function getKeyCode(evenement)
{
    for (prop in evenement)
    {
        if(prop == 'which')
        {
            return evenement.which;
        }
    }
 
    return evenement.keyCode;
}
 
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;
}

Des idées ???

**RomainVALERI** · 09/06/2010, 11h45

Je ne sais pas si c'est la cause du problème, mais en utilisant la fonction document.createElement, on est censé passer en paramètre la forme canonique de la balise à créer, en l'occurrence en majuscules : ça parait étrange mais c'est comme ça ^^

Code javascript :

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

1
2
3
case "nombre":
   input = document.createElement("INPUT");
   break;

Je vois un autre petit souci éventuel en parcourant ton code : l'opérateur delete ne fonctionne pas (voir ici) sur des propriétés déclarées avec var.

**gcgcgc** · 09/06/2010, 12h22

J'ai fait le changement sur input, pour voir, mais ca ne change rien.

Ce qui serait bien c'est de le faire pas à pas:
1er objectif:
-faire en sorte qu'en double cliquant sur une des cellules, un champ texte s'affiche contenant le précédent contenu de la cellule...

Une fois cela fait, j'essaierai de me débrouiller...

**RomainVALERI** · 09/06/2010, 13h36

Tu suis ton développement sur Firefox ? Si oui commence par ouvrir Firebug et suivre un peu ce qui se passe quand tu double-cliques, ça serait précieux ^^

Et si tu veux qu'on jette un oeil, donne-nous un lien

(ou à la limite montre nous au moins le code html de la page, mais en tout cas pas le fichier php : plutot le code html généré par ce php)

**gcgcgc** · 10/06/2010, 11h28

Alors sur firebug, je ne vois rien quand je clique...
Dans l'onglet script, il y a bien le fichier js, mais ca se comporte comme si il n'y avait rien, le js est activé aussi...
Je développe l'appli pour un intranet, je n'ai donc pas de lien..

Ma page html, j'ai juste remplacé des choses par "-----" pour éviter de reconnaitre la bdd.

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
 
<?php session_start() ;  ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Ajout de groupe</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="mod_pole.css" />
   	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../banniere/banniere.css" />
 
   </head>
   <body>
   <script type="text/javascript" src="inlinemod.js"></script>
    <?php
  if (!isset($_SESSION['pseudo']))       
  {
        header('Location: '.get_cfg_var("URL_HTTP")."/GDflux/index.php?erreur=authentification");
                }
include("../banniere/banniere.php"); 
                          
                 ?>
 
 
	<?php 	
 	$host = get_cfg_var("-----"); 
	$user = get_cfg_var("-----"); 
	$pass = get_cfg_var("-----");                      // récupérer l'url pour telle ou telle chose sur le serveur dans une variable.
	$bdd = get_cfg_var("-----"); 
 
 
	@mysql_connect($host,$user,$pass)                      
    or die("Impossible de se connecter au serveur");
	@mysql_select_db("$bdd")                                   
    or die("Impossible de se connecter à la base de données");
 
	$requete = "SELECT * FROM -----";         
 
		try                                                
		{
			$result = mysql_query($requete);	
		}
		catch (Exception $e)
		{
			die('Erreur : ' . $e->getMessage());
		}?>
 
 
 
 
<div id="ecran">
    <table id="tab_equipe"BORDER="1" ALIGN="CENTER" CELLPADDING="10" CELLSPACING="1">
	<caption>Modifier Pole</caption>
        <thead><tr>
            <th>Id</th>                         //affichage tête tableau HTML
            <th>Nom</th>
	    </tr></thead>
 
        <?php
        while($user = mysql_fetch_assoc($result))        // affichage contenu avec la fonction inlinemod présente dans le js
        {
        ?>
            <tbody><tr>
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'nom', 'nombre')">
                    <?php echo $user['id']; ?>
                </td>
 
                <td class="cellule" ondblclick="inlineMod(<?php echo $user['id']; ?>, this, 'prenom', 'texte')">
                    <?php echo $user['nom']; ?>
                </td>
				</tr></tbody>
        <?php
        }
        ?>
    </table>
	</div>
 
   </body>
</html>

le code 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
 
 
 
//On ne pourra éditer qu'une valeur à la fois
var editionEnCours = false;
 
//variable évitant une seconde sauvegarde lors de la suppression de l'input
var sauve = false;
 
//Fonction de modification inline de l'élément double-cliqué
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;
		}
	};
}
 
 
 
//Fonction renvoyant le code de la touche appuyée lors d'un événement clavier
function getKeyCode(evenement)
{
    for (prop in evenement)
    {
        if(prop == 'which')
        {
            return evenement.which;
        }
    }
 
    return evenement.keyCode;
}
 
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;
}

Voila tout...

Ce n'est pas bien compliqué car le tabeau n'a que 2 colonnes, et il n'y a rien d'autre sur la page...
Une fois que cela sera ok, j'irai plus loin...

**gcgcgc** · 10/06/2010, 11h35

En fait, je me suis rendu compte que je l'avais mis plus haut en entier hier...

Sur firebug, je vois pas comment faire pour voir en fait...je lance le script mais je vois pas comment voir ce qui va ou pas...

**RomainVALERI** · 10/06/2010, 11h47

Envoyé par gcgcgc

En fait, je me suis rendu compte que je l'avais mis plus haut en entier hier...

Oui mais le php ne nous avance pas beaucoup

même en ayant des notions plus ou moins complètes en PHP, les gens qui vont être amenés à t'aider ici sur le forum ajax ne doivent pas avoir à imaginer ou supposer ce que contiennent tes variables PHP : c'est pourquoi je te demandais de nous poster plutôt le code HTML généré par ce fichier PHP ^^ (comme expliqué ici)

**gcgcgc** · 10/06/2010, 11h59

Oui, dsl::

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Ajout de groupe</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="mod_pole.css" />
   	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../banniere/banniere.css" />
	   <!--<script type="text/javascript" src="inlinemod.js"></script>-->
 
   </head>
 
  <body>
   <script type="text/javascript" src="inlinemod.js"></script>
       <div id="tete">         
            <ul id="menu">     	// c'est le menu déroulant, inutile de le décomposer ici
             </ul>	
	</div>
 
// partie intéressante		 
 
<div id="ecran">
    <table id="tab_equipe"BORDER="1" ALIGN="CENTER" CELLPADDING="10" CELLSPACING="1">
	<caption>Modifier Pole</caption>
        <thead><tr>
            <th>Id</th>
 
            <th>Nom</th>
			</tr></thead>
 
                    <tbody><tr>
                <td class="cellule" ondblclick="inlineMod(24, this, 'id', 'nombre')">
                    24                </td>
 
                <td class="cellule" ondblclick="inlineMod(24, this, 'nom', 'texte')">
                    pole-tron                </td>
 
				</tr></tbody>
                    <tbody><tr>
                <td class="cellule" ondblclick="inlineMod(19, this, 'id', 'nombre')">
                    19                </td>
 
                <td class="cellule" ondblclick="inlineMod(19, this, 'nom', 'texte')">
                    pole-ice                </td>
				</tr></tbody>
 
            </table>
	</div>
 
   </body>
</html>

thanks

**gcgcgc** · 10/06/2010, 14h02

Désolé de remonter le topic, mais pas d'idée?
Je ne vois pas trop ce qui cloche, en fait les arguments passent bien dans la fonction mais l'input ne veut pas être créé...
et editionEnCours est à truc lorsque je clique sur une cellule (test du script dans firebug) mais l'input n'apparaît pas...

**RomainVALERI** · 10/06/2010, 14h17

Envoyé par gcgcgc

et editionEnCours est à truc lorsque je clique sur une cellule (test du script dans firebug) mais l'input n'apparaît pas...

Tu arrives à retrouver ton input dans le DOM de la page (même s'il n'apparait pas) dans l'inspecteur DOM ?

(dans le doute, tu as essayé d'utiliser appendChild au lieu de replaceChild (en supprimant le second param) ?)

**gcgcgc** · 10/06/2010, 15h58

Non, j'arrive pas à retrouver l'input dans le DOM, mais j'ai peut être du mal, je suis pas trop à l'aise avec firebug...(quoi qu'il en soit, j'ai cherché une bonne dizaine de minutes pas trouvé)
Par conter quand je lance le script, dans "var input = null; ", je retrouve en face dans firebug que input est "undefined"...:S
Sinon, j'ai aussi remplacé par appendChild sous tes conseils, ca marche pas non plus...

**gcgcgc** · 10/06/2010, 16h54

D'ailleurs, chose encore plus étrange:
ici; http://olance.developpez.com/article...emple/classes/

Ca marche, mais dès que je récupère le html, et les fichiers js grace à firefox et que j'essaie de le faire tourner chez moi en local, ca marche plus...:S
Je-ne-comprends-rien !!!!

**RomainVALERI** · 10/06/2010, 17h37

Dans l'exemple que tu cites, dans la section head, ils ont inclu 3 fichiers JS pour ce fameux inline-mod... chez toi on en retrouve plus qu'un seul... est-ce normal ? ^^

**gcgcgc** · 11/06/2010, 09h27

Oui, ces 3 fichers, c'est l'amélioration du premier (que j'ai chez moi)

J'ai aussi essayé chez moi avec les 3 (les 4 en fait...regarde bien) et ca ne fonctionne pas non plus...
Ce soir un mec va venir de filer un coup de main deux petites heures.

[AJAX] javascript-ajax & tableau html

AJAX

Discussions similaires

Partager

Partager