Discussion :

[gaet-gaet]

Bonjour a tous

J'ai un probléme et pour mieux comprendre, je vais tenté une courte explication sur ce que je cherche a faire.

L'explication
Je travaille actuellement sur le projet "Diz-shop", pour le module boutique, nous proposons 2 type d'affichage pour la liste d'article. Soit un liste, soit un descriptif plus approfondie. Pour ce faire, j'ai installer 2bouton (visuel et liste) et lorsque le visiteur clique dessus sa lance une requête ajax que j'ai conçu grâce à mootools.


Le problème
Ma requete ajax marche parfaitement, mais le script qui est contenu dans ma nouvelle page, n'est pas charger dans sa totalité. J'ai mi un alert('demo'); dans ma fonction domready. Cependant, il y a que lui qui fonctionne car (comme on peu le voir dans la vidéo) l'effet et le chargement ajax sur le bouton "Visuel" est désactivé et l'ajout au panier (oui lui aussi est en ajax) ne fonctionne pas.

Cliquez ici pour télécharger la vidéo du problème

Les question:
Je sais que c'est une question récurant mais d'habitude je charge que des réponse au formulaire, cette fois j'ai décidé de modernisé un peu tout sa en affichant la page complète mais comment fait-on pour que mon script soit interprété entièrement? j'utilise "evalScripts: true" dans ma requête sa ne devrait-il pas être suffisent ou alors j'ai mal compris sa fonctionnalité?

Quelque source:
Requete Ajax:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
//On appelle la requete AJAX
	var req = new Request({method: 'get',
			url: lien,
			evalScripts: true,
			onSuccess: function(response) { 
					(function(){ 
					//On ajoute notre nouveau contenu
					div_ajax.set('html',response); 
					//On suprime notre Box de chargement
					CreateBox.destroy();
				}).delay(1900, div_ajax); // On retarde l'affichage pour que sa soit un minimum cohérent avec notre effet morph (pas présent dans ce bout de code)
				}
				}).send();

Exemple de script à exécuté:

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
 
<script type="text/javascript">  window.addEvent('domready',function() 									 
        {	
		 	alert("demo");
            $('mode_visu').addEvent('click', function(e){	
                e.stop();
                RequestAJAX('mode_visu','boutique-style-gamer-liste-article-ajax-visuel.html');  	
            });	
 
            var Fx2 = new Fx.Tween($('img_visu'), { property: 'opacity',
                                                      duration: 300,
                                                      transition: Fx.Transitions.Sine.easeInOut,
                                                      link:'chain'
                                                    });
            $('img_visu').addEvents({
                'mouseover': function(){
                    Fx2.start(1,0);
                    Fx2.start(0,1);
                    (function(){ $('img_visu').src='templates/v1/images/boutique/liste.png' }).delay(300);
                },
                'mouseleave': function(){
                    Fx2.start(1,0);
                    Fx2.start(0,1);
                    (function(){ $('img_visu').src='templates/v1/images/boutique/liste-disabled.png' }).delay(300);
                }
            });
 
        });
        </script>

Merci d'avance pour tout ceux qui on une idée pour résoudre mon problème

[Nighty]

Je n'ai malheureusement pas le temps ce jour de faire des tests sur ce problème, mais voilà quelques pistes :

- S'assurer qu'aucune erreur Javascript n'est présente dans le code qui est évalué, car les erreurs du Javascript évalué sont "muettes" et n'apparaissent pas dans la console d'erreur.

- S'assurer également que les éléments soient bien chargées dans le dom (je ne suis pas sûr que l'évènement domready se déclenche bien à chaque chargement de réponse Ajax HTML...). Essayer des choses comme

Code :

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

if (! $defined($('mode_visu'))) alert('#mode_visu undefined');

pourrait aider à diagnostiquer le problème.

- Eviter tant que possible l'utilisation d'evalScripts. Je ne vois rien dans ce code, à première vue, qui ne pourrait être déclenché par un évènement onComplete de l'objet Request.HTML à la place.

En espérant que ça dépanne un peu.

[gaet-gaet]

ok ok je vais vérifier tout sa!

[1002zin]

Bonjour,
J'ai le même genre de soucis
J'essaie de limiter au maximum le nombre de pages dans une démarche en plusieurs étapes.
Mon soucis c'est qu'évidement chaque nouveau bout de formulaire viens se greffer sur le précédent et que le nouveau morceau nécessite des modifications en js (réinitialisation de boutons qui lance des requêtes AJAX, chargement de liste...)
J'ai tout de suite pensé à ce que dit Nighty, le soucis c'est que l'évaluation des scripts se fait avant qu'on ai pu faire quoi que ce soit de la réponse AJAX.
Perso, les éléments sur lesquels porte le js ne sont pas encore sur la page donc pas de risque que ca fonctionne.

Question :
- Y a-t-il un moyen de déclencher l'eval manuellement (après avoir chargé la réponse)

Merci pour vos réponses (oubliez pas l'eval)
Lynx

[gaet-gaet]

J'ai vérifier, il y avait une petite erreur sur une définition d'ID mais sa ne fonctionne pas pour autant. La ligne que tu m'a donner à fonctionner dans le domready de la nouvelle page

EDIT: J'ai essayer avec un evalReponse a true mais sa na rien changer (sa a même empiré car sous Google Chrome, le script était devenu inopérant)

[gaet-gaet]

personne

pour récap, le addevent fonctionne en domready mais pas click, mousseover ou mouseleave ces idées?