Problème Event.observer

Problème Event.observer - HTML/CSS - Programmation

Marsh Posté le 16-12-2007 à 20:20:10    

Bonjour tout le monde :jap:  
J'ai un petit (gros?) soucis avec la librairie prototype, et plus particulierement avec Event.observer.
Je vous explique le topo:
Pour éviter les horribles onclick, onload dans les attributs html, j'ai mis en place un gestionnaire d'évenements dans mon .js. Donc ca fonctionne, sauf quand les évenements sont sur des pages differentes.
 
Mon code de test:
 
function coucou(){
alert("test" )
}
function initEventHandlers(){
 
Event.observe("f", "click", coucou, false);
Event.observe("g", "click", coucou, false);
Event.observe("h", "click", coucou, false);
 
}
 
Event.observe(window, 'load', initEventHandlers, false); //Observateur d'evenements sur la page (methode prototype)
 
Mon probleme:
si j'ai par exemple dans mon fichier index.php?page=acceuil =>    <span id="f'>test</span> <span id="g">test2</span>   Mes deux evenenemts fonctionnent parfaitement.
En revanche, si le <span id="f">test</span est sur la page index.php?page=acceuil et que span id="g">test2</span est sur la page index.php?page=contact, ben je n'ai plus qu'un évenement qui marche.
En regle general , et pour etre le plus clair possible, mais évenements ne fonctionnent que si ils sont tous sur la meme page, ce qui est tres énervant. Si j'ai plus d'un Event.observe dans ma fonction initEventHandlers, seul le premier fonctionne  :(  
Bref, si quelqun a une idée d'ou ce probleme peut bien venir, ca serai super sympa.  :)


Message édité par orbitalxox le 16-12-2007 à 20:46:34
Reply

Marsh Posté le 16-12-2007 à 20:20:10   

Reply

Marsh Posté le 17-12-2007 à 01:59:44    

Hum, le probleme ne vient pas de Prototype mais du DOM j'ai l'impression. J'ai essayé avec ca:
 
function init(){
document.getElementById("h" ).addEventListener("click", coucou2, false);
document.getElementById("f" ).addEventListener("click", coucou2, false);
document.getElementById("testimg" ).addEventListener("click", coucou2, false);
}
 
Dans ce cas, la fonction init() est appellée la aussi au load de la page. Et la encore , les evenements h et f qui se trouve sur la meme page fonctionnent, mais pas testimg qui est sur une autre page du site. En revanche, si je met h et f en commentaire, testimg fonctionne a nouveau.
Je ne sais pas trop quoi faire  :(

Reply

Marsh Posté le 17-12-2007 à 03:44:32    

orbitalxox a écrit :

Hum, le probleme ne vient pas de Prototype mais du DOM j'ai l'impression. J'ai essayé avec ca:
 
function init(){
document.getElementById("h" ).addEventListener("click", coucou2, false);
document.getElementById("f" ).addEventListener("click", coucou2, false);
document.getElementById("testimg" ).addEventListener("click", coucou2, false);
}
 
Dans ce cas, la fonction init() est appellée la aussi au load de la page. Et la encore , les evenements h et f qui se trouve sur la meme page fonctionnent, mais pas testimg qui est sur une autre page du site. En revanche, si je met h et f en commentaire, testimg fonctionne a nouveau.
Je ne sais pas trop quoi faire  :(


 
 
tu m'étonnes que ca marche pas.
Tu essayes de taper sur des éléments qui n'existent pas d'une page à l'autre, c'est un peu crade.
 
Déjà avec firebug tu verrais justement les erreurs que tu fais.
 
En gros tu assignes un event à un élément qui n'existe pas :
"h" n'existe pas sur la page, donc erreur JS, donc le script s'arrête au niveau de l'erreur et donc "f" n'est pas traité.
 
2 choix s'offrent à toi.
1- Continuer à garder les onclick="" sur les éléments de ta page. Et je te dirai que ce n'est pas moche si c'est raisonnable. Vouloir tout sortir dans un fichier JS peut-être bien, mais super chiant derrière pour la maintenance. cela dépend du couple temps/argent/compétences
 
2- Tester chaque élément avant de lui assigner des event, c'est le minimum vitale à faire quand on fait ce que tu es en train de faire.
 

Code :
  1. function initEventHandlers(){
  2.   if ($("f" ))  Event.observe("f", "click", coucou, false);
  3.   if ($("g" )) Event.observe("g", "click", coucou, false);
  4.   if ($("h" ))  Event.observe("h", "click", coucou, false);
  5. }


 
Sinon le plus sexy est de passer par une fonction qui justement s'occupe de tester l'élément et de rajouter l'event seulement si celui-ci existe :  

Code :
  1. function addEventIfExists(element, event, function) {
  2.   if ($(element)) Event.observe(element, event, function, false);
  3. }
  4. function initEventHandlers(){
  5. addEventIfExists("f", "click", coucou);
  6. addEventIfExists("g", "click", coucou);
  7. addEventIfExists("h", "click", coucou);
  8. }


 
 
 

Reply

Marsh Posté le 17-12-2007 à 10:33:51    

Merci pour ta réponse Gatsu. Mais le truc que je ne comprend pas, c'est que par exemple, si j'ai
Event.observe("f", "click", coucou, false);
Event.observe("g", "click", coucou, false);
Event.observe("h", "click", coucou, false);
 
et que f n'existe pas, comme tu le dis, la fonction s'arrette. En revanche, si je commente les lignes g et h, ben si f est le seul Event.observe restant, ben la l'evenement fonctionne. Desolé je ne sais pas si je suis tres clair.
Et puis, si j'ai mon  
Event.observe(window, 'load', initEventHandlers, false). Le gestionnaire est appellé apres la création de l'arbre DOM donc je comprend pas pourquoi j'ai des soucis...


Message édité par orbitalxox le 17-12-2007 à 10:51:07
Reply

Marsh Posté le 17-12-2007 à 18:34:22    

Re, finalement, j'ai retenu ta solution des
 
   if ($("f" ))  Event.observe("f", "click", coucou, false);
   if ($("g" )) Event.observe("g", "click", coucou, false);
   if ($("h" ))  Event.observe("h", "click", coucou, false);
 
Ca marche tres tres bien en fait. Merci beaucoup  :jap:

Reply

Marsh Posté le 17-12-2007 à 19:28:41    

ben normal, si tu n'as pas compris ce que j'ai dit, c'est que tu n'as pas installé firebug et pas chercher à comprendre.
sinon utiliser ma dernier solution qui est largement mieux

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed