[AJAX] Contenu dynamique dans un div chargé dynamiquement

Version imprimable

03/02/2009, 00h10
black is beautiful

[AJAX] Contenu dynamique dans un div chargé dynamiquement

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
03/02/2009, 07h59
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.
03/02/2009, 13h49
black is beautiful

Comment est-ce que je peux ajouter des évènements dynamiquement ?
Faut-il que je modifie le fichier principal directement ?
03/02/2009, 14h12
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 :roll:)

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

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
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 ?

Code:

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

04/02/2009, 10h04
black is beautiful

Super ça marche !!!

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