[Ajax.Request] fonction de réponse

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:

---

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:

---

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

++

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:

---

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 ??? */ } }); } });

---

Bonjour (et merci de ta réponse)

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

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:

---

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 ++

Citation:

---

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:

---

1 2 3

var that = this; ... that.reponse (transport);

---

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:

---

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:

---

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 ? :mrgreen:), 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:

---

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:

---

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)); [...]

---