Discussion :

[jak0]

Bonjour,

J'éprouve quelques difficultés avec le bindAsEventListener.
C'est pour faire des modules un peu à la netvibes, de chaque côté de la page principale, sur mon site.
Pour simplifier au maximum, j'ai 2 div l'un au dessus de l'autre avec dans chacun un bouton.
Ce bouton sert à descendre le div (en fait à inverser les 2 div).

1) Pour l'inversion, j'utilise bêtement (et le problème vient de là, mais comment faire autrement ???) la propriété innerHTML

2) Pour "écouter" l'évènement des 2 boutons, j'utilise 2 objets d'une Class fille de type Module crée via la lib prototype (Class.create). Et j'assigne une fonction au bouton via bindAsEventListener

*) Mon problème : L'inversion, marche bien, mais une fois que c'est fait, les boutons ne semblent plus liés à leur évènement... On clic dessus et rien ne se passe, la fonction n'est pas appelée.

Je suppose que c'est le fait de passer par innerHTML, qui "déconstruit" le code et à la reconstruction, les bind ne sont plus liés car le innerHTML est une autre instance.

Si quelqu'un pouvait m'aider, me donner quelques pistes svp ??
Merci d'avance

[SpaceFrog]

mon extension boule de cristal de firfox 2 ne marche pas sur firefox3 ...

Il va donc falloir que tu nous mette un peu de code en exemple

à priori je dirais que cela provient de la manière d'attribuer la fonction déclenchée par l'evenement ...

la methode classique en javascript est

Code :

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

monObj.onclick=function(){alert(coucou')}

ensuite faut voir si l'aatribution se fait dans une boucle, avec ou sans paramètres...

[jak0]

mon extension boule de cristal de firfox 2 ne marche pas sur firefox3 ...

MDR, je voulais déjà pas trop compliquer au premier post, et voir si y avait des gens qui viendrai m'aider
Histoire de pas trop effrayer

Pour le code, côté HTML/Javascript-inline, ça donnerai un truc type ça :

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
<script>
var Module_surv = Class.create();
Module_surv.prototype = {
  initialize: function (module_id) {
    this.module_id = module_id;
    this.button_down = $('module-'+this.module_id+'-down');
    this.button_down.onclick = this.buttonDownClick.bindAsEventListener(this);
  },
  buttonDownClick: function (evt) {
    // execution d'un appel Ajax
    // [ ... ]
    another_module = (this.module_id == 0) ? 1 : 0;
    html0 = $('module-'+this.module_id).innerHTML;
    $('module-'+this.module_id).innerHTML = $('module-'+another_module).innerHTML;
    $('module-'+another_module).innerHTML = html0;
  }
}
</script>
 
<div id="module-0">
  <img id="module-0-down" title="Déplacer vers le bas" src="fleche_bas_mini.gif" />
</div>
<script>module_0 = new Module_surv('0');</script>
 
<div id="module-1">
  <img id="module-1-down" title="Déplacer vers le bas" src="fleche_bas_mini.gif" />
</div>
<script>module_1 = new Module_surv('1');</script>

Là, c'est simplifier au maximum. Et je rappel que j'utilise la lib Prototype pour la création de la classe.
la fonction $(...) équivaut à document.getElementById(...)

[jak0]

Un exemple très simple : Page de test

[SpaceFrog]

à priori l'attributin du onclick se faisant ici ..

Code :

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

 this.button_down.onclick = this.buttonDownClick.bindAsEventListener(this);

essaye le le modifier selon l'exemple de code que j'ai donné précédemment ...

[jak0]

Code :

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

this.button_down.onclick = this.buttonDownClick;

Sur le principe, ça marche. En tout cas, au mois la première fois. Mais disons que je peux allé plus loin que la première fois...
Toutefois, dans ma fonction buttonDownClick, j'ai besoin de pouvoir accéder à l'instance this de l'objet de type Module_surv. Et de cette manière là, dans la fonction button_down_onclick, l'instance de this que j'ai est de type Image (normal en même temps)...

En plus, apparement, le résultat est le même.