Edition de l'affichage avec modification BDD

**ToxiK** · 22/12/2009, 18h56

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 :

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

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 :

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

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

**danielhagnoul** · 22/12/2009, 23h40

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 :

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

**ToxiK** · 27/12/2009, 19h17

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 :

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
$("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>

**danielhagnoul** · 27/12/2009, 22h55

Bonsoir.

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 :

j'ai essayé plusieurs solutions sans succès.
Réponse 2 :

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 :

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

**ToxiK** · 28/12/2009, 01h04

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 :

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

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

Je n'arrive pas à utiliser directement une fonctions jQuery.

**danielhagnoul** · 28/12/2009, 01h36

Bonsoir.

Où se trouve l'id toto ?

Sinon cela équivaut à

Code :

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

$("#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.

Edition de l'affichage avec modification BDD

jQuery

Vue hybride

Discussions similaires

Partager

Partager