Discussion :

[black is beautiful]

Bonjour à tous,

J'utilise mootools mais le problème ne vient pas de là. En fait je charge dynamiquement du contenu avec l'objet xmlhttprequest et j'aimerai que le contenu chargé puisse avoir des évènements comme sur la page principal, mais le problème est que ce contenu est comme figé.

Quelqu'un aurait-il une solution svp ?

Merci d'avance

[Bovino]

Il n'existe pas en JavaScript de procédé type héritage de classe.
Les événements sont affectés à des éléments particuliers.
Ainsi, lorsque tu mets à jour une page dynamiquement avec Ajax, il faut ensuite affecter les événements souhaités dans ta fonction callback.

[black is beautiful]

Comment est-ce que je peux ajouter des évènements dynamiquement ?
Faut-il que je modifie le fichier principal directement ?

[Bovino]

Sur l'événement onSuccess de la requête Ajax, tu insères le résultat obtenu puis tu gères les événements... (Avec un peu de code, ça aiderait pour t'aider )

[black is beautiful]

J'utilise Mootools donc dans ma page principal j'ai le code suivant :

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
window.addEvent('domready', function(){
 
  // Slide horizontal du contenu
  var myslide = new Fx.Slide('data', {mode: 'horizontal'});
 
  // Requête de chargement dynamique
  var modifData = new Request.HTML({
		onSuccess: function(html){
			$('data').set('text', '');
			$('data').adopt(html);
			$('data').fireEvent('successful');
		},
		onFailure: function(){
			$('data').set('text', 'The request failed.');
			$('data').fireEvent('failed');
		}
	});
 
	$('data').addEvents({
        		'successful': function(){
        			     myslide.slideIn();
        		},
        		'failed': function(){
        			     myslide.slideIn();
        		}
            });
 
  // Charger le contenu avec l'animation
  loadData = function(adress)
  {
      myslide.slideOut().chain(function(){
                                    modifData.send({url:adress});
                          	})
  };
 
  // ImageMenu : 
  var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
 
        // Evenements du menu
        	$('menu').addEvents({
        		'mouseenter': function(){
        			this.set('tween', {
        				duration: 1000,
        				transition: Fx.Transitions.Bounce.easeOut
        			}).tween('height', '80px');
        		},
        		'click': function(){
        			//this.set('tween', {}).tween('height', '20px');
        		}
        	});
 
});

Et donc dans la page chargé dynamiquement qui sera placé dans le div 'data', j'ai mis des liens et un autre div 'subcontainer', et j'aimerai que quand on clique sur ces nouveaux liens le div 'subcontainer' soit actualisé. Le problème est donc que subcontainer n'est pas connu au premier chargement de la page, il n'arrive que dynamiquement, donc pas moyen d'y accéder dans la fonction domready.

Qu'est-ce que la fonction callback ?

[Bovino]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var modifData = new Request.HTML({
		onSuccess: function(html){
			$('data').set('text', '');
			$('data').adopt(html);
                        // Ici, tu peux définir de nouvelles gestions d'événements
			$('data').fireEvent('successful');
		},
		onFailure: function(){
			$('data').set('text', 'The request failed.');
			$('data').fireEvent('failed');
		}
	});

[black is beautiful]

Super ça marche !!!

Merci beaucoup, c'est vraiment puissant l'Ajax.