Actualisation du DOM

**sidacoq** · 13/07/2010, 00h48

Bonjour,

Je suis dans une impasse qui est un peu complexe pour moi

J'utilise la librairie MOotools.

Alors j'effectue une requête.HTML qui me permet de récupérer des informations que je place dans ma page dans un div reponse exactement.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
new Request.HTML({
	method:  'post',
	url:'.'+url, 
	onRequest:function() {
		//...
 
	},
	onSuccess: function(trees, eles, html, js) {
		//
		$('reponse').set('html',html);
		}	
	}).send();

Avec les informations retournées, je souhaite exécuter une autre requête AJAX mais la ... ca bloque aucune réponse.

imaginons que dans mon div #reponse je recupere :

Code :

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

1
2
3
<div id="reponse">
      <a class="click">test</a>
</div>

et que dans un autre fichier JS :

Code :

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

1
2
3
$$('click').addEvent('click', function() {
		e.stop();
});

Logiquement, quand je clique sur le lien hypertext "test" qui a été transmis par requete.HTML, il ne devrait rien se passer mais la page se recharge quand même ...

Voila merci à tous.

**vermine** · 13/07/2010, 08h02

Bonjour,

En fait pour rechercher un élément selon sa classe, vous devez la précéder d'un point:

Code :

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

1
2
3
4
$$('.click').addEvent('click', function() {
      alert(2);
});

Ensuite, évitez d'employer des mots clefs comme "click" pour nommer une classe. Ca pourrait vous jouer des tours finalement.

Pour ce qui est de stopper l'évènement click sur le <a>, il faudrait se renseigner car nous ne devons pas confondre le click du onclick et du href.

Du coup, ce que je vous propose en attendant de trouver mieux, c'est de renvoyer false:

Code :

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

1
2
3
4
 
$$('.click').addEvent('click', function() {
	return false;
});

**sidacoq** · 13/07/2010, 10h26

Merci de ta réponse.
Mais dans ce cas, la question n'est pas comment stopper une href

Effectivement désolé c'était un exemple pas très conforme dans ma démonstration mais qui fonctionne quand même.

La question est comment placé les éléments retournées par un requete.html dans le DOM afin de pouvoir reutiliser des actions JS (mootools) sur celle-ci ?

Merci

**vermine** · 13/07/2010, 11h06

Oui, oui, c'est bien ce que j'avais compris. Je pensais que set('html', html); allait parser les nouveaux éléments créés. Ce n'est pas le cas ?
Qu'avez-vous dans la variable html ?

Car si je fais un set('html',...) puis que je récupère l'élément que je viens de créer avec $$('.ma_classe'), et bien je le récupère bien.

**sidacoq** · 13/07/2010, 11h17

Exact, le retour est :

Code :

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

set(html, "<a class="click" href="./test">test</a>");

Le requete.HTML me retourne bien le contenu dans ma balise div mais lorsque j'essaie de cliquer sur le lien test, le lien fonctionne et me redirige vers la page "./test" alors que :

Code :

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

1
2
3
$$('.click').addEvent('click', function() {
	return false;
});

... existe bien.

Il me semble que le problème vient du contenu "<a class="click" href="./test">test</a>" et/ou du code JS qui n'a pas été prise en compte dans le DOM. (supposition)

Merci de ton aide vermine

**vermine** · 13/07/2010, 12h24

C'est assez triste. Note que ceci me perturbe:

Code :

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

1
2
 
set(html, "<a class="click" href="./test">test</a>");

La variable html = <a class="click" href="./test">test</a> ? C'est bien ça ?
Car la syntaxe correcte est :

Code :

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

1
2
 
$('reponse').set('html', '<a class="click" href="./test">test</a>');

C'est-à-dire en faisant attention aux " et '. Mais bon, je suppose que vous avez ça dans une variable donc vous ne devez même pas vous en tracasser.

Et ceci fonctionne chez vous ?

Code html :

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

1
2
3
4
 
<body id="id_body">
 
</body>

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
window.addEvent('domready', function(){
 
   var b = $('id_body');
   b.set('html', '<a href="http://www.google.be" id="test" class="click">Google!</a>');
 
 
   var a = $$('.click');
   alert(a[0].id);
 
   $$('.click').addEvent('click', function() {
	return false;
   });
});

**sidacoq** · 13/07/2010, 13h09

Oui je te confirme que si l'on charge le JS après l'exécution du JS ca fonctionne mais ...
Voila un code qui se rapproche plus de ce que j'ai :

Dans mon exemple, j'ai besoin que le code retourné par le requete.HTML soit réutilisable par mon JS sans rechargement de la page

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
<html>
<body>
 
<a class="revreturn">test</a>
<div id="response"></div>
 
window.addEvent('domready', function(){
 
$$('.revreturn').addEvent('click', function(e) {  
 
	new Request.HTML({
	method:  'post',
	url:'./test.html', 
	onSuccess: function(trees, eles, html, js) {
		$('response').set('html',html);
		}	
	}).send();
 
});
 
   $$('.click').addEvent('click', function() {
	return false;
   });
}); 
</body>
</html>

Code :

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

1
2
#test.html
<a class="click" href="./error.html">test ok</a>

Merci à toi

**vermine** · 13/07/2010, 13h21

Je n'ai pas de rechargement de page dans mon code. Je fais le set html dans le domready donc après le parsing DOM. Du coup je pense être dans la même configuration qu'un appel Ajax.
N'ayant jamais fait d'Ajax avec Mootools, je me demande si l'erreur ne vient pas de là. Une alert de html donne quoi ? (enfin, prompt pour pouvoir faire un copier/coller):

Code :

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

1
2
3
4
5
6
7
8
 
new Request.HTML({
	method:  'post',
	url:'./test.html', 
	onSuccess: function(trees, eles, html, js) {
		prompt(html);
		}	
	}).send();

**sidacoq** · 13/07/2010, 13h28

J'obtiens "<a class="click" href="./error.html">test ok</a>" dans un prompt.

**vermine** · 13/07/2010, 13h35

Sans le premier et le dernier " je suppose.

En attendant, voici ce que vous essayiez de faire, à la place de mon return false:

Code js :

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

1
2
3
4
 
$$('.click').addEvent('click', function(e){
        e = new Event(e).stop();
});

Apparemment il faut instancier pour que ça fonctionne. Et lui passer "e" en paramètre mais ça me paraissait plus logique.

**sidacoq** · 13/07/2010, 13h39

Je vous confirme que cela fonctionne.
A part sans exécution request.HTML, la fonction pour stop fonctionne.

C'est en appelant le contenu via le request.HTML que la fonctionne ne fonctionne plus, comme si le nouveau contenu de la page <test.html> n'était pas prise en compte dans le DOM.

**vermine** · 13/07/2010, 13h43

C'est ça que je ne comprends pas.

Et en fait:

Code :

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

e.stop();

fonctionne aussi. Pour peu qu'on passe le "e" en paramètre. Me semblait l'avoir testé tantôt sans succès.

Je vais faire d'autres tests mais malheureusement je n'ai pas de faire de l'Ajax.

**sidacoq** · 13/07/2010, 13h47

ok merci.
J'ai besoin de faire passer (je pense) mon résultat dans mon DOM element, afin qu'il puisse être réutiliser dans rechargement de page.

Une autre idée ?
Merci à tous

**vermine** · 13/07/2010, 13h56

Ha ben de rien. Merci d'avoir mis la solution.

Je reste perplexe quant au set('html', html) mais tant mieux si adopt est la méthode qu'il faut.

**sidacoq** · 13/07/2010, 13h57

Grosse illusion désolé.
Ca ne fonctionne pas .. je continue mes tests

**vermine** · 13/07/2010, 14h15

Peux-tu poster ton code afin que je vois les enchainements ?

**sidacoq** · 13/07/2010, 14h17

C'est le post #7

**vermine** · 13/07/2010, 14h32

Donc en fait vous essayez de faire:

Code :

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

e.stop();

sur un élément qui n'est pas encore créé ?

Quand désirez-vous que le nouveau <a> ne recharge plus la page ? Dès sa création ? Lors d'un clic autre part ?

**sidacoq** · 13/07/2010, 14h47

Il y a 2 phases ici :

1er phase :

Je clique sur le lien <test> pour charger le contenu de dans le div #response.
A partir de la ca fonctionne

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
 
<html>
<body>
 
<a class="revreturn">test</a>
<div id="response"></div>
 
window.addEvent('domready', function(){
 
$$('.revreturn').addEvent('click', function(e) {  
 
	new Request.HTML({
	method:  'post',
	url:'./test.html', 
	onSuccess: function(trees, eles, html, js) {
		$('response').set('html',html);
		}	
	}).send();
 
});
 
   $$('.click').addEvent('click', function() {
	return false;
   });
}); 
</body>
</html>

Ensuite le Request.HTML charge le contenu où apparaît :

Code :

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

1
2
3
4
 
<div id="response">
      <a class="click" href="./error.html">test ok</a>
</div>

et a partir de la le lien deviens cliquable alors que grave à la fonction créer il ne devrait pas.

Cependant, si l'on place le code JS dans le onSuccess, cela fonctionne.
Je ne peux malheureusement pas placer le code dans le onSuccess dans la réalité car il est utilisé dans et en dehors du onSucess.

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
 
<html>
<body>
 
<a class="revreturn">test</a>
<div id="response"></div>
 
window.addEvent('domready', function(){
 
$$('.revreturn').addEvent('click', function(e) {  
 
	new Request.HTML({
	method:  'post',
	url:'./test.html', 
	onSuccess: function(trees, eles, html, js) {
		$('response').set('html',html);
 
		   $$('.click').addEvent('click', function() {
	                  return false;
                    });
 
		}	
	}).send();
 
});
 
}); 
</body>
</html>

C'est compliqué mais je pense que ca peux aider pas mal de gens à faire plus de chose grâce à çà.

**vermine** · 13/07/2010, 14h53

Ce qu'il y a c'est que dans votre premier code, c'est logique que ça ne fonctionne pas car l'élément n'est pas encore crée.

Vous voulez dire que ce code (je préfère le e.stop au return false):

Code :

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

1
2
3
4
 
$$('.click').addEvent('click', function(e) {
	e.stop();
});

est utilisé pour d'autres élément dans la classe est "click" ? Des éléments qui sont déjà présents dans la page ? Hé... en mettant le code aux deux endroits ?

Actualisation du DOM [MooTools]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager