[prototype] boucle sur element [Résolu]

[mat07]

Bonjour à tous,

depuis peu je me suis mis à utiliser prototype, et j'ai un petit soucis pour une boucle.
Voici mon objectif : j'ai une liste créer à partir de ma base de données.
dans ma balise <li> j'ai un <span class="deleteCat"></span>. Et je veux que sur le clic du span sa m'appelle une fonction.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
Voici mon code : 
 
function init(){
 
	//gestion des suppressions
	$$('.deleteCat').each(function(p) {
		Event.observe($(p), 'click', deleteCategory(p), false);
	});
 
}
 
Event.observe(window, 'load', init, false);

Mon problème c'est que la fonction "deleteCategory" est appelé au chargement de ma page et pas sur le click de mon span.

Est-ce un problème de structure de boucle?
Avez-vous une idée.

En vous remerciant d'avance de votre aide.

@+

[cereal59]

Essais avec ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function init(){
 
//gestion des suppressions
$$('.deleteCat').each(
                        function(p) 
			{
			    Event.observe($(p), 'click', function(event)
                                                                          { 				                                                                            deleteCategory(p);
									   }, false);
			});
 
}

Je pense que la fonction appeler pour repondre a l'evenement prend un event en parametre

Tu devrais peut etre aussi declarer ta fonction deleteCategory de la maniere suivante

Code :

1
2
3
4
5
 
var deleteCategory = function(p)
{
 // ton code ici
}

PS: Je n'ai pas teste si le code fournit fonctionne, je l'ai fait de tete donc il faudra peut etre l'adapter un peu ...

[mat07]

Merci. C'est bon comme ça . L'evenement se fait bien uniquement sur le clic de mes span.

Merci beaucoup cereal59.

[mat07]

Euhh... en faite j'ai crié victoire trop tot.

Car mon evenement se gere bien au click. Mais sa marche une fois uniquement.

Situation : j'ai ma liste avec un span "delete" a coté.
Quand je clique sur mon span ca marche, mais si je veux supprimer un deuxieme element de ma liste , la ça ne marche plus.

[cereal59]

Peux tu montrer ton code ?

[mat07]

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
 
//supprime une categorie
 var deleteCategory = function (p){
	new Ajax.Updater(
		'listeCategory',//l'id de la liste (<ul>)
		'r_category.php',
		{
			method: 'post',
			parameters: 'deleteCategory='+ p.id,
		}
	);
}
 
// init onload
function init(){
 
	//gestion des suppressions
//pour chaque span qui se trouve dans ma liste comme ceci : //<li>monTexte<span> X </span></li>
	$$('.deleteCat').each(function(p) {//mes span ont la class "deleteCat"
		Event.observe($(p), 'click', function (event){deleteCategory(p);}, false);
	});
}
 
 
Event.observe(window, 'load', init, false);

[cereal59]

Que fais exactement ton ajax updater, si il reaffiche toute la liste, c'est normal que les categories ne repondent plus aux evenements.

Je m'explique, tu definis des evenement sur des elements HTML, ensuite lors du clic, ces elements sont remplacer par d'autres, il faut donc remettre en place le gestionnaire d'evenement sur les nouveaux element en rappelant init sur le onComplete par exemple


Peux tu me montrer aussi le HTML et le php pour etre sur que c'est bien ce qu'il se passe ??

[mat07]

Code :

1
2
3
4
5
6
 
<ul id="listeCategory">
<?php
include('r_category.php');
?>
</ul>

r_category.php

Code :

1
2
3
4
5
6
7
8
 
...
//liste les categories
$query = mysql_query("select * from category;");
while($resultat = mysql_fetch_array($query)){
	echo'<li class="listeCat" id="cat_'.$resultat['id'].'" ><span class="move">_</span>'.$resultat['title'].'<span id="deleteCategory_'.$resultat['id'].'" class="deleteCat">x</span></li>';
} // while
...

[cereal59]

J'ai modifie ma reponse precedente, et apparement c'est bien ce a quoi je pense

lors du ajax updater tu remplaces le contenu de ta liste et donc les nouveaux elements html ne repondent pas aux clics.

tu peux faire comme ca:

Code :

1
2
3
4
5
6
7
8
9
10
 
new Ajax.Updater(
		'listeCategory',//l'id de la liste (<ul>)
		'r_category.php',
		{
			method: 'post',
			parameters: 'deleteCategory='+ p.id,
                        onComplete : init,
		}
	);

[mat07]

Oui. ça fonctionne. J'ai rajouté

Code :

onComplete: function(){init();},

Merci beaucoup de tes réponses.

Bonne journée