Discussion :

[jak0]

Bonjour,

Je me tourne vers vous au sujet de la fonction appelée en réponse d'un Ajax.Request (lib Prototype).
Dans l'API, il est indiqué de procéder comme suit :

Code :

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

1
2
3
4
5
new Ajax.Request('/your/url', {
  onSuccess: function(transport) {
      // yada yada yada
  }
});

C'est vrai que vu comme ça, ça paraît enfantin. Je me trouve toutefois devant une question à laquelle je ne parviens pas à trouver de réponse.
Au retour onSuccess de l'Ajax.Request, comment appeler une fonction d'un objet (l'instance d'un objet qui nous a servi pour initialiser l'Ajax.Request) ?

Voilà un petit exemple :

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
var MyClass = Class.create ({
  initialize: function (name) {
    this.name = name;
  },
  reponse: function (transport) {
    alert (this.name + " -> " + transport.headerJSON.info);
  },
  requete: function ( ) {
    new Ajax.Request('/your/url', {
      onSuccess: function (transport) {
        this.reponse (transport);
        /* le probleme est la, comment faire pour appeler l'instance
        de l'objet ??? */
      }
    });
  }
});
 
var object_1 = new MyClass ("name_1");
 
object_1.requete ();

Le problème étant de pouvoir appeler l'instance de l'objet.

Merci d'avance de vos réponses, idées et pistes...

++

[Bovino]

Salut,

Lorsque tu rentres dans ton callback, la référence à this est modifiée (this représente désormais l'objet window), il faut créer une variable contenant la référence à this :

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
var MyClass = Class.create ({
    var that = this;
  initialize: function (name) {
    this.name = name;
  },
  reponse: function (transport) {
    alert (this.name + " -> " + transport.headerJSON.info);
  },
  requete: function ( ) {
    new Ajax.Request('/your/url', {
      onSuccess: function (transport) {
        that.reponse (transport);
        /* le probleme est la, comment faire pour appeler l'instance
        de l'objet ??? */
      }
    });
  }
});

[jak0]

Bonjour (et merci de ta réponse)

Désolé de répondre que maintenant, mais j'avais pas le net ces jours...

Si j'ai bien compris ce que tu proposes dans ta solution :
tu bypass le fait d'être dans un contexte statique en créant/appelant une variable globale ? c'est une bonne idée, mais le problème c'est que j'utilise plusieurs instance de cette classe, simultanément...

Après de longues recherches, j'ai peut-être trouvé une solution. Dis-moi ce que tu en penses

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
var MyClass = Class.create ({
  initialize: function (name) {
    this.name = name;
  },
  reponse: function (transport) {
    alert (this.name + " -> " + transport.headerJSON.info);
  }
});
MyClass.requete = function (my_object) { // fonction statique
    new Ajax.Request('/your/url', {
      my_object: my_object,
      onSuccess: function (transport) {
        transport.request.options.my_object.reponse (transport);
        /* en cherchant avec FireBug, j'ai retrouvé ma variable my_object à cet endroit... */
      }
    });
  }
 
var object_1 = new MyClass ("name_1");
 
MyClass.requete (object_1);

A priori ça marche.

Mreci de ta réponse ++

[Bovino]

tu bypass le fait d'être dans un contexte statique en créant/appelant une variable globale ?

Non, pas tout à fait, je crée une propriété de ta classe qui contient la référence à this et qui du coup est visible depuis toutes les méthodes de ta classe, y compris les fonctions anonymes qui perdent la référence à this.
Si tu regardes le code de mon précédent message, j'ai ajouté deux lignes :

Code :

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

1
2
3
var that = this;
...
that.reponse (transport);

[Oscar Hiboux]

Salut !

Lorsque tu crées ton objet Ajax.Request tu lui passes certaines choses dont la fonction traitant l'événement "onSuccess". À ce moment précis, cette fonction, définie à la volée, est une fonction complètement "volatile" si je puis dire, anonyme en plus. Elle n'est rattachée à aucun contexte (si ce n'est le contexte global).

Ici il s'agit simplement "d'attacher" la fonction à ton instance à l'aide de "Function#bind". Ainsi, lorsque l'exécution en sera là, tu seras dans le cadre de ton instance et this sera bien la référence sur celle-ci. Autrement, la fonction sera simplement appelée... dans la nature, et dans la nature this ne vaut pas grand-chose ! ^^

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
var MyClass = Class.create ({
    initialize: function (name) {
        this.name = name;
    },

    reponse: function (transport) {
        alert (this.name + " -> " + transport.headerJSON.info);
    },

    requete: function ( ) {
        new Ajax.Request('/your/url', {
            onSuccess: function (transport) {
                this.reponse(transport);
            }.bind(this)
        });
    }
});

@Bovino : attention à la syntaxe ! :p

Code :

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

1
2
3
4
5
6
7
8
9
10
var MyClass = Class.create ({
    /* var that = this; */
    that: this,

    initialize: function (name) {
        this.name = name;
    },

    ...
});

Sinon, je n'ai pas testé (et toi ? ), mais je doute fortement que ça fonctionne vu que ton "that" est un membre de... l'instance. N'ayant pas accès à l'instance lors de l'appel à la fonction qui pose problème on va avoir du mal à accéder à une de ses propriétés... D'ailleurs, au moment où tu crées la classe, this ne vaut pas grand-chose non plus (sauf si tu crées la classe en étant dans le cadre d'une instance, ce qui me surprendrait beaucoup).

L'idée était là ceci-dit, et c'est la même dans ce que j'expose plus haut et la solution de jak0 : rendre accessible l'instance au moment de l'exécution de la fonction. C'est exactement ce que fait "Function#bind".

Malheureusement, c'est vite dégueulasse à lire tous ces bind... voici un cas similaire, avec "Enumerable#each" :

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
var StrawberryField = Class.create ({
    strawberries: null,
    farmer: null,
 
    initialize: function (farmer) {
        this.strawberries = [];
        this.farmer = farmer;
    },
 
    check: function() {
        this.strawberries.each(function(strawberry) {
            if(strawberry.isMature()) {
                this.famer.notify("Hey, Bob! Another strawberry is mature!");
            }
        });
    }
});

Le code ci-dessus ne fonctionnerait pas car la fonction d'itération passée à each est, elle aussi, larguée dans la nature. Il faudrait la rattacher à l'instance avec bind ou bien utiliser le deuxième paramètre d'each pour qu'each le fasse en interne.

Bref, qqchose comme ça, qui ébranle un peu la magie d'each :

Code :

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

1
2
3
4
5
6
7
[...]
    this.strawberries.each(function(strawberry) {
         if(strawberry.isMature()) {
             this.famer.notify("Hey, Bob! Another strawberry is mature!");
         }
     }.bind(this));
[...]