[jQuery]formulaire multi-imbriqué Symfony

Bonjour,

J'ai un petit soucis avec un formulaire. Le formulaire est bien généré néanmoins quand j'utilise la fonctionnalité ajouter une personne, rien ne se passe. Je suis sûr que le problème vient de :

		
for(var i = 0; i <= index_max; i++){
       $('#add_personne_' + i).click(function() {
	add_personne();
	return false;
	});
}

Néanmoins, je ne trouve pas comment arranger ça...

voici le code js entier, avec un bout d'html :

<a href="#" id="add_role">Ajouter un métier</a>
		<a href="#" id="add_tag">Ajouter un tag</a>
		<input type="submit" />
	</form>
	
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function() {
		//récupération des balises
		var $container = $('#ssscinecube_filmsbundle_filmtype_personne');
		var $contain = $('#ssscinecube_filmsbundle_filmtype_tag');
		var $container_personne = [];
		// fonctions d'ajout
		function add_role() {
			// On définit le numéro du champ (en comptant le nombre de champs déjà ajoutés)
			index = $container.children().length;
			$container.append($($container.attr('data-prototype').replace(/__name__/g, index)));
			// On ajoute également un bouton pour pouvoir supprimer la catégorie 
			$container.append($('<a href="#" id="delete_role_' + index +'">Supprimer le rôle</a><br /><br />'));
			$container.append($('<a href="#" id="add_personne_' + index + '">Ajouter une personne</a>'));
                        //on ajoute une ligne au tableau contenant la  balise interne à la balise de role
			$container_personne.push($('#ssscinecube_filmsbundle_filmtype_personne_' + index + '_personne'));
			$('#delete_role_' + index).click(function() {
				$(this).prev().remove(); 
				$(this).remove();
				return false;
			});
			return index;
		}
		function add_tag() {
			indx = $contain.children().length;
			$contain.append($($contain.attr('data-prototype').replace(/__name__/g, indx)));
			// On ajoute également un bouton pour pouvoir supprimer la catégorie 
			$contain.append($('<a href="#" id="delete_tag_' + indx +'">Supprimer</a><br /><br />'));
			// On supprime le champ à chaque clic sur le lien de suppression 
			$('#delete_tag_' + indx).click(function() {
				$(this).prev().remove();
				$(this).remove(); 
				return false;
			});
		}
		function add_personne(index_role){
			index_personne = $container_personne[index_role].children().length;
			$container_personne[index_role].append($($container_personne[index_role].attr('data-prototype').replace(/__name__/g, index_personne)));
    		$container_personne[index_role].append($('<a href="#" id="delete_personne_' + index_personne + '">Supprimer la personne</a><br /><br />'));
			$('#delete_personne_' + index_personne).click(function() {
				$(this).prev().remove();
				$(this).remove();
				return false;
			});
		}
		// ajout premiers champs
		if($container.children().length == 0) {
			index_max = add_role();
			add_personne(index_max);
			
		}
		if($contain.children().length == 0) {
			add_tag();
		}
		//ajouts lors de clics
		$('#add_role').click(function() {
			add_role();
			return false;
		});
		$('#add_tag').click(function() {
			add_tag();
			return false;
		});
		for(var i = 0; i <= index_max; i++){
			$('#add_personne_' + i).click(function() {
				add_personne();
				return false;		
			});
		}	
	});
	</script>

Merci pour tout aide possible...

Hello,

Bon j'ai pas tout regardé, mais t'appelles ta méthode add_personne() sans arguments, alors que tu l'as déclaré prenant un argument "index_role".

Sinon faire une boucle pour assigner des events, c'est pas la meilleure chose à faire.
Le problème dans ta structure c'est qu'il y a des ID partout, tu n'utilises jamais les classes.

Tu aurais très bien pu faire un truc du genre :

$(".addPerson").on("click", function(e){
    var currentIndex = $(this).data("indexRole");
    add_personne(currentIndex);
    e.preventDefault(); // Je préfère ça à return false;
});

Et côté html, l'élément ressemblerait à ça :

<div class='addPerson' data-indexRole="5">Ajouter</div>

Autres remarques importantes :
- Quand tu veux que quelqu'un comprenne ton problème, créé plutôt un fiddle sur jsFiddle ( http://jsfiddle.net/ ) ou CodePen ( http://codepen.io/ ) par exemple.
- Utilises la console javascript pour voir les erreurs générées (console native sous Chrome / Safari, Firebug sous Firefox)
- Il est préférable de séparer ton code js de ton code html. Tout mélanger c'est forcément plus difficile pour debugger. Donc met ton code dans un ou plusieurs fichiers js séparés.
- Évite de déclarer des events (pour delete_personne par exemple) au sein des fonctions.
Il faut structurer au maximum ton code. Là ça prend le chemin d'un gros plat de spaghettis…
- Pour déclarer un event, utilises plutôt on() et off()
- N'utilises pas $ pour déclarer tes variables. Laisses le $ aux objets jQuery, c'est perturbant sinon…
- Évite d'avoir du code html dans le js (du genre element.append("<a></a>"). Essaye de passer par des templates html (mustache, handlebars, underscore, y'en a plein), ou au pire construit un fichier js avec des templates dedans, exemple :

var linkDeleteRole = '<a href="#" class="deleteRole" data-indexRole="0">Supprimer le rôle</a><br /><br />';
var linkAddPerson = '<a href="#" class="addPerson" data-indexRole="0">Ajouter une personne</a><br /><br />';

Bon allez je m'arrête là
Modifié par ZeB_panam (07 Jul 2013 - 08:59)

Ok, je te remercie pour toutes tes indications (je débute en js, et je me suis un peu perdu avec un script trouvé que j'ai essayé de modifier).

Je vais améliorer tout ça, et à ce moment là, je verrais si j'arrive à tout débugger plus facilement...

Merci encore!