Traitement AJAX de lignes automatique

[Stéphane Bruckert]

Bonjour,

Bon, ça fait un jour complet que je galère avec ce truc. Je vous prie de m'aider un peu ...

J'ai actuellement ce code qui marche. Il présente au départ une ligne avec deux champs à remplir. Dès qu'on clique dessus ça en rajoute une, etc. J'aimerais que lorsqu'on clique sur une ligne, ça rentre les données dans la bdd en ajax. Une fois envoyé, on change : <div class=state>Pas envoyé</div>

J'essaie de faire ça avec jQuery, mais j'ai du mal à savoir comment va devoir se présenter le truc. J'aurais bien fais un selector sur name="id" et name="surf". Mais après je sais pas quoi en faire, ni comment l'utiliser dans le $.post. Et encore moins comment gérer mon class=state.

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
<script src="http://code.jquery.com/jquery-1.5.js"></script>
 
 
<table id="tableau">
	<tr>
		<th>Numéro de parcelle</th>
		<th>Surface</th>
		<th>État</th>
	</tr>
</table>
 
<script>
	var nbligne = 1;
 
	document.write('<form action="/" id="addline">');
 
	function nouvelleligne(nbligne){
		return 	'<tr name="'+ nbligne +'"  onKeyPress="ajouterligne($(this));" onclick="ajouterligne($(this));">' +
			'<td><input name="id" type="text" /></td>' +
			'<td><input name="surf" type="text" /></td>' +
			'<td><div class=state>Pas envoyé</div></td>' +
			'</tr>';
	}
 
	// on crée la première ligne
	var nouvelle_ligne = nouvelleligne(nbligne);
	$(nouvelle_ligne).appendTo("#tableau");
 
	document.write('</form>');
 
	function ajouterligne(ligne){
		// Si c'est la dernière ligne	
		if(ligne.attr('name') == nbligne){
			// On insert la nouvelle ligne
			nbligne ++;
			var nouvelle_ligne = nouvelleligne(nbligne);
			$(nouvelle_ligne).insertAfter(ligne);
			// on change la variable nbligne et on l'affiche 
			$("#result").html("nb ligne = " + nbligne);
		}
	}
 
</script>

Bref un grand merci à ceux qui veulent bien prendre part.

[SpaceFrog]

Code :

document.write

en gros tu as deux champs avec en bout de ligne pas envoyé
tu renseignes les champs ça modifie "pas envoyé" en "enregistré" ??
et ça rajoute deux champs en dessous ?

[Stéphane Bruckert]

Edit : voir fin.

Oui c'est ça.

Quand on ajoute un caractère dans un formulaire ou quand on clique sur l'un deux :
- ça ajoute une ligne si c'est la dernière ligne,
- ça enregistre les deux formulaires.

En fait voilà le truc mis à jour. J'ai réglé la plupart des problèmes.

Ca ne marche toujours pas et je pense que le problème se trouve au niveau du commentaire "ICI". A mon avis ce qu'on met à la place de "ligne" n'est pas juste.

Enfin si j'ai fais comme ça c'est parce que je pense que "ligne" correspond au "form" de la ligne et que ça envoit par POST tous ses input.

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
<script type="text/javascript" src="js/jquery.js">
<script src="js/jquery.min.js"></script>
 
<table id="tableau"></table>
 
<script>
	var nbligne = 1;
 
	function nouvelleligne(nbligne){
		return 	'<form action="/" name="'+ nbligne +'" onKeyPress="ajouterligne($(this));" onclick="ajouterligne($(this));">' +
			'<input name="id" type="text" />' +
			'<input name="surf" type="text" />' +
			'</form>';
	}
 
	// on crée la première ligne
	var nouvelle_ligne = nouvelleligne(nbligne);
	$(nouvelle_ligne).appendTo("#tableau");
 
	function ajouterligne(ligne){
 
		// Si c'est la dernière ligne	
		if(ligne.attr('name') == nbligne){
			// On insert la nouvelle ligne
			nbligne ++;
			var nouvelle_ligne = nouvelleligne(nbligne);
			$(nouvelle_ligne).insertAfter(ligne);
		}
 
		$(ligne).ajax({ //ICI
			url:'traitement.php',
			type: 'POST',
			data: $(this).serialize(),
			success: function(html) {
				alert('ce que renvoie le fichier PHP' + html);
			}
		});	
	}	
</script>

Edit : ça marche en remplaçant

Code :

$(ligne).ajax({ //ICI

par

Code :

$.ajax({ //ICI

Mais le .php ne me renvoie rien.

Je croyais que :

Code :

1
2
3
success: function(html) {
               alert('ce que renvoie le fichier PHP' + html); 
}

me renvoyait ce que renvoie le fichier PHP ??

Ca suffit pas de mettre un "return $_REQUEST['id'];" dans traitement.php ?

Merci encore !

[SpaceFrog]

Code :

1
2
success: function(codehtml) {
				alert('ce que renvoie le fichier PHP' + codehtml);

[Stéphane Bruckert]

Tu as dû te tromper dans ton message !

[SpaceFrog]

???

tu utilises html ... c'est un mot reservé de jquery ... évite !!

Ensuite ton code js est en plein milieu du form !


j'ai des doutes sur la portée de this dans le

Code :

 $(this).serialize()

[Stéphane Bruckert]

Ahhh pardon ! J'avais pas vu ...
Ca ne change rien.
Y'aurait quelque chose à faire avec ce this ?

Edit :
J'ai "réussi". Ça marche en remplacant :

Code :

data: $(this).serialize(),

par

Code :

data: $('[name=f'+ nbline +']').serialize(),

Maintenant mon PHP renvoi :

Code :

1
2
3
4
Array (
[id] =>
[surf] =>
)

Alors que dedans je viens de mettre des valeurs.
Si je crée mes inputs avec :
value="qqch"

J'aurai

Code :

1
2
3
4
Array (
[id] => qqch
[surf] => qqch
)

Et même si je change les valeurs des forms, ça les met pas à jour quand il les envoie au PHP.
Tu sais comment récupérer les valeurs "dynamiques" ?