Edition de l'affichage avec modification BDD

Version imprimable

Bonjour,

j'ai un tableau avec des occurrences issues de ma BDD, j'ai un ID pour chaque occurrence mais pour l'instant je ne sais pas comment m'en servir (dans les id="" ou avec un input hidden).
Code:

1 2 3 4 5 6 <table id="table_categorie"> <tr><td class="edit_cat">toto</td></tr> <tr><td class="edit_cat">titi</td></tr> <tr><td class="edit_cat">tutu</td></tr> <tr><td class="edit_cat">tete</td></tr> </table>
je souhaite que lorsque je je clique sur une cellule de mon tableau, cela crée un input text, ensuite sur le blur() de cet input, si le texte à été modifié je veux le modifier dans la BDD puis rafraichir mon tableau.
Code:

1 2 3 4 5 6 $(".edit_cat").click(function () { var nom = $(this).html(); var input_file = document.createElement('input'); $(input_file).attr({type: 'text', id: 'coucou', name: 'cat_coucou', value:nom}); $(this).html(input_file); });
Pour l'instant j'arrive à modifier ma cellule en input text, mais si on reclic sur la cellule, alors le contenu de l'input devient <input ...../> ce qui est normal mais je n'arrive pas à éviter ça.

Ensuite, comment faire pour passer l'id de mon occurence en appelant ma requête sur le blur ?

ps : je ne veux pas utiliser de solution toute faite, je veux pouvoir en faire une en utilisant jQuery.

re ps : je débute avec jQuery, donc le code n'est peut être pas optimisé, tous vos conseils sont bons à prendre :)

Bonsoir.

Voici un exemple, il utilise la version alpha 1 de jQuery 1.4 (plusieurs bugs, pour test uniquement), car jQuery 1.3.2 live() ne supporte pas les événements « blur » et « change ».

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
<!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> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="Author" content="Daniel Hagnoul" /> 
	<title>Page type</title> 
	<style type="text/css"> 
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
	</style> 
	<script type="text/javascript" src="../lib/jquery-1.4a1.min.js"></script> 
	<script type="text/javascript"> 
		$(window).ready(function(){
			$("td.edit_cat").click(function(){
				if ($(this).attr("tdtype") == "texte"){
					$(this).attr("tdtype","input");
					$(this).html("<input class='coucou' type='text' value='" + $(this).text() + "' />");
				} 
			});
 
			/*
			 * j'utilise jQuery 1.4a1 car jQuery 1.3.2
			 * live() ne supporte pas blur() ou change()
			*/
			$("input.coucou").live("change", function(){
				var str = $(this).val();
				var id = $(this).parent()[0].id;
				var obj = $(this).parent();
 
				obj.html(str);
				obj.attr("tdtype","texte");
 
				// une transaction AJAX pour mettre la BDD à jour
				// pour id le texte devient str
				// $.post("test.php", {id: id, nom: str});
			});
		});
	</script> 
</head> 
<body> 
	<div id="conteneur">
		<table id="table_categorie">
			<tbody>
				<tr><td id="tdID1" class="edit_cat" tdtype="texte">toto</td></tr>
				<tr><td id="tdID2" class="edit_cat" tdtype="texte">titi</td></tr>
				<tr><td id="tdID3" class="edit_cat" tdtype="texte">tutu</td></tr>
				<tr><td id="tdID4" class="edit_cat" tdtype="texte">tete</td></tr>
			</tbody>
		</table>
	</div> 
</body> 
</html>

Merci beaucoup :)

C'est exactement ce que je cherchait à faire,

j'ai rajouté mon traitement avec le $.post

Par contre il me reste deux problèmes que je n'arrive pas à résoudre :

1 - Lorsque l'on ajoute l'input au TD je n'arrive pas à mettre le focus sur cet input, en fait je n'arrive pas à combiner le $(this) et les sélections par xpath et css.

2 - Lorsque je suis dans mon input et que j'appuis sur la touche entrée, le nom afficher à la place de l'input et doubler (mais pas dans la BDD, jsute problème d'affichage)
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 $("td.edit_cat").click(function(){ if ($(this).attr("tdtype") == "texte"){ $(this).attr("tdtype","input"); $(this).html("<input class='input_cat' type='text' value='" + $(this).text() + "' />"); $(this).; } }); $("input.input_cat").live("change", function(){ var str = $(this).val(); var id = $(this).parent()[0].id; var obj = $(this).parent(); obj.html(str); obj.attr("tdtype","texte"); $.post("script_maj_categorie.php", {id: id, nom: str}, function(data){ //alert(data); }); }); $("input.input_cat").live("blur", function(){ var str = $(this).val(); var id = $(this).parent()[0].id; var obj = $(this).parent(); obj.html(str); obj.attr("tdtype","texte"); }); <tr><td id="td_cat_2" class="edit_cat" tdtype="texte">toto</td></td></tr> <tr><td id="td_cat_5" class="edit_cat" tdtype="texte">titi</td></td></tr> <tr><td><input type="text" name="zt_nom"/></td><td><input type="image" src="../images/add.png" alt="Ajouter"/></td></tr>

Bonsoir.

Citation:

Envoyé par ToxiK

1 - Lorsque l'on ajoute l'input au TD je n'arrive pas à mettre le focus sur cet input, en fait je n'arrive pas à combiner le $(this) et les sélections par xpath et css.
2 - Lorsque je suis dans mon input et que j'appuis sur la touche entrée, le nom afficher à la place de l'input et doubler (mais pas dans la BDD, jsute problème d'affichage)

Réponse 1 : :aie: j'ai essayé plusieurs solutions sans succès.
Réponse 2 : :aie: blur fait double emploi avec change et provoque donc un double affichage.

Code amélioré pour le cas où l'utilisateur efface le contenu de l'input sans rien mettre à la place :

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
<script type="text/javascript"> 
    $(window).ready(function(){
        $("td.edit_cat").click(function(){
            if ($(this).attr("tdtype") == "texte"){
                var str = $(this).text();
                $(this).attr("tdtype","input");
                $(this).html("<input class='coucou' type='text' oldvalue='" + str + "' value='" + str + "' />");
            }
        });
 
        /*
         * j'utilise jQuery 1.4a1 car jQuery 1.3.2
         * live() ne supporte pas blur() ou change()
        */
        $("input.coucou").live("change", function(){
            var str = $(this).val();
 
            /*
             * l'utilisateur peut effacer le texte de
             * l'input et ne rien mettre à la place !
            */
            if (str.length > 0){
                var id = $(this).parent()[0].id;
                var obj = $(this).parent();
 
                obj.html(str);
                obj.attr("tdtype","texte");
 
                // une transaction AJAX pour mettre la BDD à jour
                // pour id le texte devient str
                // $.post("test.php", {id: id, nom: str});  
            } else {
                // on rétablit la valeur précédente
                var obj = $(this).parent();
                obj.html($(this).attr("oldvalue"));
                obj.attr("tdtype","texte");
            }
        });
    });
</script>

28/12/2009, 01h04
ToxiK

Merci beaucoup :)

J'ai effectué l'amélioration effectivement c'est mieux.

Par contre pour mettre le curseur sur mon input je suis obligé d'utiliser

Code:

document.getElementById('toto').select();

Je n'arrive pas à utiliser directement une fonctions jQuery.
28/12/2009, 01h36
danielhagnoul

Bonsoir.

Où se trouve l'id toto ?

Sinon cela équivaut à

Code:

$("#toto").select();

Dans les essais précédents j'ai essayé de faire un « select », j'obtenais dans la console Firebug l'information l'« input » à le focus, mais cela ne se traduisait pas visuellement.
28/12/2009, 01h42
ToxiK

Code:

$('#toto').select();

ne correspond pas à

Code:

document.getElementById('input_' + t_id).select();

J'ai l'impression que le .select sur un élément de jQuery se comporte comme le focus, et non comme le select de JS.

Pour te répondre #toto est l'input créé lorsque l'on clique sur un td

Bonjour.

Effectivement, il y a une grosse différence de comportement.

Code:

1
2
3
4
5
6
7
8
9
10
11
$("td.edit_cat").click(function(){
    if ($(this).attr("tdtype") == "texte"){
        var str = $(this).text();
        $(this).attr("tdtype","input");
        $(this).html("");
        $(this).append("<input id='" + str + "' class='coucou' type='text' oldvalue='" + str + "' value='" + str + "' />");
 
        document.getElementById(str).select();
        //$("#"+str).select();
   }
});

Bonjour.

Eurêka ! J'ai trouvé et simplifié le code ! On apprend toujours quelque chose de nouveau !

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="Author" content="Daniel Hagnoul" /> 
	<title>Page type</title> 
	<style type="text/css"> 
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
	</style> 
	<script type="text/javascript" src="../lib/jquery-1.4a2.min.js"></script> 
	<script type="text/javascript"> 
		$(window).ready(function(){
 
            // jQuery 1.4
            $("input,textarea").live("focus", function(){
                if (this.value == this.defaultValue){
                    this.select();
                }
            });
 
            $("td.edit_cat").click(function(){
				if ($(this).attr("tdtype") == "texte"){
                    var str = $(this).text();
					$(this).attr("tdtype","input");
					$(this).html("");
                    $(this).append("<input class='coucou' type='text' value='" + str + "' />");
                    $("input", this).focus();
				}
    		});
 
			/*
			 * j'utilise jQuery 1.4a1 car jQuery 1.3.2
			 * live() ne supporte pas blur() ou change()
			*/
			$("input.coucou").live("change", function(){
				var str = $(this).val();
 
                /*
                 * l'utilisateur peut effacer le texte de
                 * l'input et ne rien mettre à la place !
                */
                if (str.length > 0){
                    var id = $(this).parent()[0].id;
                    var obj = $(this).parent();
 
                    obj.html(str);
                    obj.attr("tdtype","texte");
 
                    // une transaction AJAX pour mettre la BDD à jour
                    // pour id le texte devient str
                    // $.post("test.php", {id: id, nom: str});  
                } else {
                    // on rétablit la valeur précédente
                    var obj = $(this).parent();
                    obj.html(this.defaultValue);
                    obj.attr("tdtype","texte");
                }
			});
 
        });
	</script> 
</head> 
<body> 
	<div id="conteneur">
		<table id="table_categorie">
			<tbody>
				<tr><td id="tdID1" class="edit_cat" tdtype="texte">toto</td></tr>
				<tr><td id="tdID2" class="edit_cat" tdtype="texte">titi</td></tr>
				<tr><td id="tdID3" class="edit_cat" tdtype="texte">tutu</td></tr>
				<tr><td id="tdID4" class="edit_cat" tdtype="texte">tete</td></tr>
			</tbody>
		</table>
	</div> 
</body> 
</html>

28/12/2009, 12h52
ToxiK

Damn, en farfouillant sur le net j'avais trouvé ça aussi hier, mais ça ne marchait pas.

En fait je viens de voir que ça ne fonctionne pas sur Safari Mac, par contre sur Firefox Mac oui :)

Pour l'instant je vais continuer à utiliser la vielle méthode, tu penses que ça vient de Safari ou de la librairie jQuery qui n'est pas encore adapté pour Safari ?

Bonsoir.

Je viens de passer 4 heures à perfectionner le code. Il ne fonctionnait pas sous IE et posait problème sous Chrome. Pour Safari je vous laisse vérifier si this.defaultValue est attribué, voir les commentaires dans le code.

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<script type="text/javascript"> 
    $(window).ready(function(){
        if (!$.browser.msie){
            /*
             * jQuery 1.4
            */
            $("input,textarea").live("focus", function(){
                if (this.value == this.defaultValue){
                    this.select();
                }
            });
 
            /*
             * jQuery 1.4
            */
            var lastChangeEventTimeStamp = 0;
            $("input.coucou").live("change", function(event){
                /*
                 * Chrome : double l'événement change si on appuye sur la touche enter !
                 * Je n'ai pas trouvé d'autre solution que de jouer sur le temps séparant deux événements.
                 * Réglage difficile, car tous les input.coucou sont concernés.
                */
                var t = event.timeStamp;
                var delta = t - lastChangeEventTimeStamp;
 
                if (delta > 500){
                    lastChangeEventTimeStamp = t;
 
                    var str = $(this).val();
 
                    /*
                     * l'utilisateur peut effacer le texte de
                     * l'input et ne rien mettre à la place !
                    */
                    if ((str.length > 1) && (str != this.defaultValue)){
                        var id = $(this).parent()[0].id;
                        var obj = $(this).parent();
 
                        obj.html(str);
                        obj.attr("tdtype","texte");
 
                        // une transaction AJAX pour mettre la BDD à jour
                        // pour id le texte devient str
                        // $.post("test.php", {id: id, nom: str});  
                    } else {
                        // on rétablit la valeur précédente
                        var obj = $(this).parent();
                        obj.html(this.defaultValue);
                        obj.attr("tdtype","texte");
                    }
                }
            });
        } else {
            /*
             * jQuery 1.4
            */
            $("input,textarea").live("focus", function(){
                // IE : defaultValue est vide !
                this.select();
 
                if (this.defaultValue.length == 0){
                    this.defaultValue = this.value;
                }
            });
 
            /*
             * IE : change ne fonctionne pas !
            */
            $("input.coucou").live("click", function(){
                var str = $(this).val();
 
                /*
                 * l'utilisateur peut effacer le texte de
                 * l'input et ne rien mettre à la place !
                */
                if ((str.length > 1) && (str != this.defaultValue)){
                    var id = $(this).parent()[0].id;
                    var obj = $(this).parent();
 
                    obj.html(str);
                    obj.attr("tdtype","texte");
 
                    // une transaction AJAX pour mettre la BDD à jour
                    // pour id le texte devient str
                    // $.post("test.php", {id: id, nom: str});  
                } else {
                    // on rétablit la valeur précédente
                    var obj = $(this).parent();
                    obj.html(this.defaultValue);
                    obj.attr("tdtype","texte");
                }
            });
        }
 
        $("td.edit_cat").click(function(){
            if ($(this).attr("tdtype") == "texte"){
                var str = $(this).text();
                $(this).attr("tdtype","input");
                $(this).html("");
                $(this).append("<input class='coucou' type='text' value='" + str + "' />");
                $("input", this).focus();
            }
        });
    });
</script>

29/12/2009, 03h36
ToxiK

Houla ça devient compliqué ^^

Je regarderais ça à tête reposée :)

C'est vraiment un régal de travailler avec jQuery
30/12/2009, 19h45
danielhagnoul

Bonjour.

J'ai bon espoir que la future version de jQuery 1.4 supporte live change.

Voir mon message : http://www.developpez.net/forums/d84...a/#post4888892
31/12/2009, 19h27
ToxiK

Super :)
11/01/2010, 09h39
danielhagnoul

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code:

$(document).ready(function(){…});

ou

Code:

$(fonction(){…});

dans sa forme abrégée.

Pour window nous devons, et nous aurions déjà dû sous jQuery 1.3.2, utilisez l’événement load :

Code:

$(window).load(fonction(){…});

Il n’y a pas de forme abrégée.

Version simplifiée qui fonctionne

Bonjour.

Voici une version simplifiée qui semble fonctionner correctement sous IE8, Chrome 3 et Firefox 3.5 ! Pour Safari et Opéra, je vous laisse le soin de tester, merci de m'informer.

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jquery-1.4rc1.min.js"></script>
	<script>
		/*
		 Edition de l'affichage avec modification BDD du 22/12/2009 par ToxiK
		*/
 
		$(function(){
			$("input,textarea").live("focus", function(){
				if(!$.browser.msie){
					if (this.value == this.defaultValue){
						this.select();
					}
				} else {
					// IE : defaultValue est vide !
					this.select();
 
					if (this.defaultValue.length == 0){
						this.defaultValue = this.value;
					}	
				}
			});			
		});
 
		$(window).load(function(){
			var objTD = null;
			var objInput = null;
 
			$("td.edit_cat").click(function(){
				objTD = $(this);
 
				if(!objTD.hasClass("input")){
					objTD.addClass("input").html('<input type="text" value="'+ objTD.text() +'" />');
 
					objInput = objTD.find("input");
 
					objInput.focus();
 
					objInput.blur(function(){
						var str = $(this).val();
 
						/*
						 * l'utilisateur peut effacer le texte de
						 * l'input et ne rien mettre à la place !
						*/
						if ((str.length > 1) && (str != this.defaultValue)){
							var id = objTD[0].id;
 
							objTD.removeClass("input").html(str);
 
							// une transaction AJAX pour mettre la BDD à jour
							// pour id le texte devient str
							// $.post("test.php", {id: id, nom: str});  
						} else {
							// on rétablit la valeur précédente
							objTD.removeClass("input").html(this.defaultValue);
						}
					});
				}
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<table id="table_categorie">
			<tbody>
				<tr><td id="tdID1" class="edit_cat">toto</td></tr>
				<tr><td id="tdID2" class="edit_cat">titi</td></tr>
				<tr><td id="tdID3" class="edit_cat">tutu</td></tr>
				<tr><td id="tdID4" class="edit_cat">tete</td></tr>
			</tbody>
		</table>
	</div>
</body>  
</html>

14/01/2010, 01h16
ToxiK

Oui ça marche :) super

J'ai juste corrigé ça car ça ne marchait pas dans mon cas, l'id est sur le TR car je m'en sert aussi pour un input select dans un autre td :

Citation:

var id = objTD[0].id;

en

var id = objTD.parent().attr('id')