Actualisation du DOM

Version imprimable

Bonjour,

Je suis dans une impasse qui est un peu complexe pour moi :mouarf:
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:

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:

1 2 3 <div id="reponse"> <a class="click">test</a> </div>
et que dans un autre fichier JS :
Code:

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.

13/07/2010, 08h02
vermine
Bonjour,

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

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. :aie:

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

1 2 3 4 $$('.click').addEvent('click', function() { return false; });
13/07/2010, 10h26
sidacoq

Merci de ta réponse.
Mais dans ce cas, la question n'est pas comment stopper une href :mouarf:
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
13/07/2010, 11h06
vermine

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. :?
13/07/2010, 11h17
sidacoq
Exact, le retour est :

Code:

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:

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 :mrgreen:

:'(

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

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:

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:

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

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

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 8-)
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 <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:

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

13/07/2010, 13h21
vermine
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:

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();
13/07/2010, 13h28
sidacoq

J'obtiens "<a class="click" href="./error.html">test ok</a>" dans un prompt.
13/07/2010, 13h35
vermine
Sans le premier et le dernier " je suppose.

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

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.
13/07/2010, 13h39
sidacoq

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.
13/07/2010, 13h43
vermine

C'est ça que je ne comprends pas. :cry:

Et en fait:

Code:

e.stop();

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

Je vais faire d'autres tests mais malheureusement je n'ai pas de faire de l'Ajax.
13/07/2010, 13h47
sidacoq

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
13/07/2010, 13h56
vermine

\o/

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. ;)
13/07/2010, 13h57
sidacoq

Grosse illusion désolé.
Ca ne fonctionne pas .. je continue mes tests
13/07/2010, 14h15
vermine

Snif

Peux-tu poster ton code afin que je vois les enchainements ? :)
13/07/2010, 14h17
sidacoq

C'est le post #7
13/07/2010, 14h32
vermine

Donc en fait vous essayez de faire:

Code:

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 ?

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:

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:

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:

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 à çà.

13/07/2010, 14h53
vermine
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:

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 ?
13/07/2010, 14h56
sidacoq

Effectivement !
Et après génération du code avec le Request.HTML pourquoi là ca bloque ?
C'est la question :)
13/07/2010, 15h02
vermine
Je ne suis pas sûr d'avoir compris.

1) Vous ouvrez la page. Il y a des liens avec la classe "click". Sur lesquels on ne peut pas cliquer.

2) Vous cliquez sur un autre lien qui lance l'Ajax. Résultat, vous avez un nouveau lien de classe "click", c'est-à-dire sur lequel on ne peut pas cliquer.

C'est bien ça ?

Donc pour le 1), il faut mettre le code
Code:

1 2 3 $$('.click').addEvent('click', function(e) { e.stop(); });
dans le domready.
Pour le 2), il faut mettre le code dans le onSuccess car le lien nouvellement créé n'est pas affecté par du code exécuté avant sa création.
13/07/2010, 15h11
sidacoq

C'est exactement ca :)
Mais dans la réalisé il ne s'agit pas de lien qui deviennent non cliquable mais d'une dizaine de script qui interagisse avec le résultat du request.HTML.

Pour éviter de faire des répétitions de code, je pensais qu'il était possible de recharger le contenu du request.HTML ou du DOM ?
13/07/2010, 15h29
vermine

Je ne sais pas pour le reparsing dom mais en tout cas aucun des scripts ne pourra interragire avec l'élément tant que celui-ci n'est pas créé. Alors que le code soit dans le onSuccess ou bien dans une autre fonction déclenchée après le onSuccess, peut importe. Mais il faut que l'élément soit déjà créé. Tout simplement.
13/07/2010, 15h34
sidacoq

Merci pour ta réponse.
Ca a le mérite d'être clair.

Ps : dernière petite question :)
comment fais tu pour faire des fonctions déclencheur ?

Merci à toi
13/07/2010, 15h38
vermine

Je ne sais pas si c'est possible en Javascript. Je pense qu'il faut créer une fonction qui sera accessible de partout, même si elle joue avec des éléments qui ne sont pas encore créés; et appeler cette fonction après la création de l'élément (dans le onSuccess si on prend ton exemple). En faisant attention de ne jamais l'appeler avant la création de l'élément.
13/07/2010, 15h48
sidacoq

Merci pour tous
++

Résolu :)