addEvent sur un new Element

**drick35** · 26/11/2012, 09h40

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**vermine** · 26/11/2012, 10h33

Bonjour,

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

**drick35** · 26/11/2012, 11h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**vermine** · 26/11/2012, 11h26

Je n'ai pas bien compris les étapes à effectuer. Où est le bouton "Nouveau" ?

**drick35** · 26/11/2012, 14h27

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.

**vermine** · 26/11/2012, 14h42

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.

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

**drick35** · 26/11/2012, 16h28

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**vermine** · 26/11/2012, 19h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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(); 
      }
   }
});

**drick35** · 27/11/2012, 11h19

j'ai juste dû mettre ma_fonction(); au dehors de events click pour que le clique droite fonctionne.

Cédric

**vermine** · 27/11/2012, 11h37

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.

addEvent sur un new Element [MooTools]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager