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.

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

Bonjour,

Pour poster un formulaire en JavaScript (avec jQuery), voila comment on fait:

$(document).ready(function() {
	$('#form').submit(function() { // Quand on soumet le formulaire
		$.ajax({
			url: 'traitement.php',
			type: 'POST',
			data: $(this).serialize(),
			success: function(html) {
				alert('ce que renvoie le fichier PHP'+ html);
			}
		});
		return false;
	});
});

Voila tu peux changer la fonction submit par un onClick sur l'élément choisit...

En espérant t'avoir aidé
Bonne continuation

ChickN

Merci.

Je tente quelque chose.

$("tr[name="+nbligne+"] :input").ajax({
	url: 'traitement.php',
	type: 'POST',
	data: $(this).serialize(),
	success: function(html) {
		alert('ce que renvoie le fichier PHP'+ html);
	}
});

Dans un premier temps, est-ce que $("tr[name="+nbligne+"] :input") veut bien dire "Je récupère tous les input de la ligne nbligne ?
Et deuxièmement, quels seront les paramètres postés ??? Les input que j'ai sélectionnés au dessus ? Dans mon fichier PHP, j'aurai dans $_REQUEST les valeurs de mes deux input (name="id" et name="surf") ?

Ce qu'il est nécessaire de connaître c'est le code HTML généré pour ensuite pouvoir travailler dessus et connaître sa structure, sans ça on y va à l'aveugle et ça fait perdre du temps à toi et à nous.

Pour les valeurs envoyés, ce sera les value de tous les name trouvés dans ton formulaire. J'espère pour toi que tu n'as pas de doublon dans tes name.

Ensuite,
Il faut que tu génère un <form> par ligne je pense comme ca il n'y a pas de probleme...

ChickN

C'est vrai ... problème de names. Merci. C'est vrai que je me lance un peu à l'aveuglette là-dedans, parce que j'ai pas le temps d'apprendre comme il le faut.

Si je fais : '<td><input name="id'+nbligne+'" type="text" /></td>'
Je pourrai aussi faire avec jQuery : $("input[name='id"+nbligne+"']")
N'est-ce pas ?

Pas bête Chicken.

Edit :
J'ai fais un <form> par ligne, supprimé le tableau, et voilà ce que ça donne.

<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 method="post" action="/" name="f+'+ 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') == (f+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>

Dans le traitement.php je n'ai qu'un return $_REQUEST('id');

Je pense que le problème se trouve là où il y'a le commentaire "ICI". A la place de "ligne" je sais pas trop quoi mettre...

Merci !

Personnellement je ne ferai pas du tout comme ça.

En plus j'ai demandé dans mon message précédent le code HTML généré, je le vois toujours pas.

Qu'est ce que tu appelles du code HTML généré ? Il est pas généré le mien ?

Je veux voir ton tableau HTML avec tes champs, si possible plusieurs. Comment il a été généré (code JS) ne m'intéresse pas si le problème n'est pas là.

Oui mais au départ on sait pas encore combien de lignes il y'aura. Tu veux dire que je devrais afficher en HTML une centaine de lignes, les cacher et les afficher en temps voulu ?
Sinon il s'avère que ça "marche" en remplaçant

$(ligne).ajax({ //ICI

par

$.ajax({ //ICI

Mais je croyais que :

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 ? Parce que là il ne me renvoie rien.

Ton name ne doit pas être un chiffre. Or ici ça l'est (variable nbligne). Rajoute un texte avant nbligne. Ensuite en PHP on utilise plus $_REQUEST. Dans ton form ajoute method="post" puis dans ton PHP tu mets simplement print_r($_POST); pour voir ce qu'il reçoit.

Tout est fait.

Ca renvoie
PHPArray ( )

Donc les infos sont pas passées, il faut que tu regardes avec Firebug ce qu'envoie ta requête ajax dans Réseau > XHR.

Pour le seul résultat que j'ai :

Dans l'onglet Headers

. Request URL:http://localhost:8888/FUCK/traitement.php
. Request Method:POST
. Status Code:200 OK
. Request Headers
. Accept:*/*
. Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
. Accept-Encoding:gzip,deflate,sdch
. Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
. Connection:keep-alive
. Content-Length:0
. Cookie:PHPSESSID=8b1a9ba77ec629a796bf694b2f0f3314
. Host:localhost:8888
. Origin:http://localhost:8888
. Referer:http://localhost:8888/FUCK/sdz.html
. User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.205 Safari/534.16
. X-Requested-With:XMLHttpRequest
. Response Headers
. Connection:Keep-Alive
. Content-Length:10
. Content-Type:text/html
. Date:Wed, 20 Apr 2011 14:44:50 GMT
. Keep-Alive:timeout=15, max=99
. Server:Apache/2.0.63 (Unix) PHP/5.3.2 DAV/2
. X-Powered-By:PHP/5.3.2


Dans l'onglet Content
Array
(
)

T'as une idée ?

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

data: $(this).serialize(),

par

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

Maintenant mon PHP renvoi :

Array (
[id] =>
[surf] =>
)

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

J'aurai

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

J'aimerais que tu me reprennes dans l'ordre ce que tu veux faire avec un code HTML que tu voudrais obtenir à la fin. Je suis perdu car tu fais des trucs vraiment bizarres, avec des formulaires dans une boucle etc.
Redis moi l'exact comportement attendu et je ferai quelque chose qui je pense sera plus simple que ce que tu essayes de faire.

En HTML ça donnerait ça :

<form action="addSurfaces" method="post" name="tabsurface">
	<table>
		<tr>
		<th>ID</th>
		<th>Surface</th>
		</tr>
		<tr>
		<td><input name="id1" value="" type="text" /></td>
		<td><input name="surface1" value="" type="text" /></td>
		</tr>
		<tr>
		<td><input name="id2" value="" type="text" /></td>
		<td><input name="surface2" value="" type="text" /></td>
		</tr>
		<tr>
		<td><input name="id3" value="" type="text" /></td>
		<td><input name="surface3" value="" type="text" /></td>
		</tr>
		<tr>
		<td><input name="id4" value="" type="text" /></td>
		<td><input name="surface4" value="" type="text" /></td>
		</tr>
		<tr>
		<td><input name="id5" value="" type="text" /></td>
		<td><input name="surface5" value="" type="text" /></td>
		</tr>
		<tr>
		<td><input name="id6" value="" type="text" /></td>
		<td><input name="surface6" value="" type="text" /></td>
		</tr>
	</table>
	<input type="submit" value="Envoyer toutes les surfaces" />		
</form>

Sauf que ça je trouve que ça fait un peu vieillot. Surtout si le mec décide de rajouter des surfaces. Sans javascript faudrait recharger toute la page. Moi depuis le début j'ai en tête un rajout de ligne automatique. Pour qu'il puisse rajouter 1 000 lignes si il veut... Et si je m'enquiquine à contacter la base de donnée à l'édition de chaque ligne, c'est pour ne jamais perdre une seule donnée (en faisant précédent ou même si son ordi s'éteint). Et au final, il aurait jamais eu besoin d'appuyer sur un seul submit !

Mais tu vois là on en est pas si loin ... Mais vu que je suis débutant en la matière, je nous ai peut-être mené dans une impasse. Et tu m'a suivi parce que tu savais pas où je voulais en venir.

En tout cas, quoi que tu fasses, merci beaucoup !

Tu trouverais pas ça plus simple d'avoir en face de chaque ligne une icône qui te permet de sauvegarder la ligne ? Plutôt que d'avoir à cliquer sur une autre ligne. Je trouve ça plus intuitif.

Oui mais 1 icône = 1 clic.
50 enregistrements = 50 clics.

Et y'aurait pas eu de clics sur lignes !

Regarde, avec tab c'est super :
http://fufu.perso.sfr.fr/lines/en.html
C'est vrai que j'aurais dû montrer ça dès le début ...

Ça me soul parce que si je parviens pas à ce que j'avais en tête j'aurai perdu 2 journées.

Je trouve pas ça super. C'est pas parce que tu cliques sur une ligne que forcément t'as envie d'en avoir une autre au-dessous.
Et si tu veux en supprimer une ?

Oui mais tu penses à quoi toi par rapport à "un utilisateur qui ne sait pas encore combien de lignes il va avoir besoin" ?

Personnellement j'ai déjà fait un système similaire à ça et que j'ai déjà vu ça sur d'autres sites.

Tu as en haut 2 boutons : "Ajouter une ligne à la fin" et "Supprimer la dernière ligne".

C'est le mieux qu'on puisse faire à mon avis, du moins le meilleur compromis.

Si tu as vraiment beaucoup de lignes tu peux faire un bouton qui dit "Ajouter X lignes à la fin", X prendra la valeur d'un input (ou d'un select) où l'utilisateur aura indiqué le nombre.

Ok bon je vais voir ...
Merci pour le temps que tu m'as accordé !

Et dernière chose. Ajout/Supression de lignes -> Javascript ou AJAX ? Et la suppression se passera comment ? Allô jQuery ?

Ben pour moi c'est pas de l'ajax (uniquement de la manipulation de DOM), faut aussi ajouter un bouton "Enregistrer la saisie" et là tu récupères tout, en ajax ou pas après c'est toi qui vois.

Si t'as besoin d'aide...