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

Actualisation du DOM [MooTools]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager