addEvent sur un new Element

Version imprimable

Bonjour,

Dans mon script je crée des new Element et les insère avec la fonction grab().
Ceci fonctionne sans problème. Je vois bien l'id alt ... dans la console.

Mon problème, le nouvel élément n'est pas sélectionnable malgré sont existences donc tous addEvents dans le script ne fonctionne pas. Ce qui est normal.

Code :
Code:

1 2 3 4 5 6 7 8 $(document.body).getElements('ul[alt=ul'+present+'-]').get('alt').each(function(el, index){ var id=$(document.body).getElement('ul[alt='+el+']').get('id'); var lilast=$(document.body).getElements('li[alt^='+present+'-]').get('alt').getLast(); var mySecondElement = new Element('li', {id: 'titre39', class:'sortme', alt: '4-2', text:'Nouveau article'}); $($(document.body).getElement('ul[alt='+el+']').get('id')).grab(mySecondElement); //insersion en fin de grap });
Tous les nouveaux éléments peuvent être manipulés comme les autres ?

Cédric

26/11/2012, 10h33
vermine

Bonjour,

Serait-il possible de voir un peu plus de code ? La partie HTML concernée et le addEvents.

voici une parie du code

le test que j'effectue se porte sur l'élément 1 Quincallerie => clic droit => Nouveau sous-article.
... L'élément se crée

Impossibilité d'avoir le menu contextuel ou de sélectionner le nouveau article.

Javascript

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
44
45
46
47
48
49
50
51
52
 
...
	var nue;
	var idchapitre;
	var gestionclicks=$$('#sortable-list li').each(function(el){
		//stop le menu contextuel
		el.addEvent('contextmenu',function(e) {	e.stop();})
 
		//créer le menu
			el.addEvent('mouseup', function(event)
			{    console.log(event.rightClick + " position x : " + event.page.x + " position y " + event.page.y);
				// ----------------------------------------------------
				//creer menu contextuel
				// ----------------------------------------------------
				if(event.rightClick) {
						$('menu').set('class', 'menu-visible');
						$('menu').setStyles({top: event.page.y-9,left: event.page.x-10});
 
					idchapitre=el.get('id');
				}
 
			});
	});
 
	// ----------------------------------------------------
	//actions du menu contextuel
	// ----------------------------------------------------
	$('nouveau-ssart').addEvents({
		mouseover: function()	{$('nouveau-ssart').set('class', 'sousmenu-visible') },
		mouseleave: function()	{$('nouveau-ssart').set('class', 'select') },
		click:function()
		{
 
			$('menu').set('class', 'menu-cache');
			var present=$(idchapitre).get('alt');
			var verif_ul=false;
			//verif existance des branches "ul" precedent
			$(document.body).getElements('ul[alt=ul'+present+'-]').get('alt').each(function(el, index){
				var id=$(document.body).getElement('ul[alt='+el+']').get('id');
				var lilast=$(document.body).getElements('li[alt^='+present+'-]').get('alt').getLast();
				console.log(lilast);
				var mySecondElement  = new Element('li', {id: 'titre39', class:'sortme', alt: '4-2', text:'Nouveau article'});
				$($(document.body).getElement('ul[alt='+el+']').get('id')).grab(mySecondElement); //insersion en fin de grap
 
				verif_ul=true;
			});
			if(verif_ul=false)
			{
 
			}
		}
	});

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
...
<ul id="sortable-list" style="padding:10px;">
<li id="titre34" class="sortme" alt="1">1  Quincaillerie</li><ul id="ul1" alt="ul1-"><li id="titre24" class="sortme" alt="1-1">1-1  Quincaillerie b</li></ul><li id="titre4" class="sortme" alt="2">2  Gros-oeuvre</li><li id="titre3" class="sortme" alt="3">3  VRD - Terrassement</li><li id="titre1" class="sortme" alt="4">4  Parquet</li><ul id="ul4" alt="ul4-"><li id="titre8" class="sortme" alt="4-1">4-1  Parquet x</li><li id="titre39" class="sortme" alt="4-2">4-2  Parquet contrecollé</li><ul id="ul4-2" alt="ul4-2-"><li id="titre9" class="sortme" alt="4-2-1">4-2-1  Parquet x 2</li></ul>		</ul><br>
 
		<img src="resize.gif" id="resizeHandle" style="float:right; border: none;">
			<input type="hidden" name="sort_order" id="sort_order" value="|||||">
			<input type="submit" name="do_submit" value="Submit Sortation" class="button">
 
 
 
		</ul>
...

Sinon vous pouvez le consulter sur http://module.construction-materiaux.com/indexd.php

Merci pour votre aide

Cédric

26/11/2012, 11h26
vermine

Je n'ai pas bien compris les étapes à effectuer. Où est le bouton "Nouveau" ?
26/11/2012, 14h27
drick35

manipulation à suivre

une fois sur la page cité ci-dessus ,
1) Faire un clique droite sur la cellule blanche " 1 Quincaillerie " se trouvant à gauche.

2) un menu contextuel personnalisé apparaît, sélectionner "Nouveau sous-article"
3) un nouveau article apparaît sous " 1-1 Quincaillerie b " , il se nomme "Nouveau article"

Cet article se nommant "Nouveau article" ne peut être sélectionné par le clic gauche de la souris et le menu contextuel personnel ne fonctionne pas.
26/11/2012, 14h42
vermine

Ce n'est sans doute que dans l'exemple mais faites attention que vous avez mis l'id et le alt en dur dans le code, ce qui donne plusieurs éléments avec le même id. :aie:

Je n'ai pas l'impression que la gestion du menu droit soit effectuée sur l'élément nouvellement créé. Vous devez rappelez le code gestionclicks sur cet élément.

PS : on dit "Nouvel article" et on dit bien "Nouveau sous-article". ;)
26/11/2012, 16h28
drick35

rappeler gestionclicks
pour rappeler gestionclicks , "est ce la bonne méthode?
Code:

1 2 var mySecondElement = new Element('li', {id: 'titre99', class:'sortme', alt: '4-2', text:'Nouveau article', events: { click: function(){ gestionclicks(); } }});
.....
sa fonctionne pas car se n'est pas une fonction !:aie:

Non malheureusement je pense qu'il faut redéfinir tous les addEvent. Du coup, il serait bien d'isoler ce code dans une fonction.

Code:

1
2
3
4
 
var gestionclicks=$$('#sortable-list li').each(function(el){
   ma_fonction();
});

Et :

Code:

1
2
3
4
5
6
7
8
9
10
11
var mySecondElement  = new Element('li', {
   id: 'titre99', 
   class:'sortme', 
   alt: '4-2',
   text:'Nouveau article',
   events: {	
      click: function(){	
         ma_fonction(); 
      }
   }
});

27/11/2012, 11h19
drick35

merci pour votre aide

j'ai juste dû mettre ma_fonction(); au dehors de events click pour que le clique droite fonctionne. :ccool:
Cédric
27/11/2012, 11h37
vermine

Oui, c'est parce que vous avez décidé de garder le each dans ma_fonction(). Je proposais de n'inclure que le contenu du each, pas le each lui même. Car à chaque appel de ma_fonction(), vous refaites les addEvent sur des éléments qui ont déjà le bon comportement au lieu de n'agir que sur le nouvel élément.