[Ajax] Transport d'objet ?

Transport d'objet ? [Ajax] - HTML/CSS - Programmation

Marsh Posté le 20-04-2007 à 09:35:56    

Bonjour

 

Petit (gros ?) soucis d'utilisation d'ajax et des objets en javascript :

 

Ma page html créé un nouveau composant.

 

var composant = new Composant("jesuisleroot", new Array('1', '2'));

 

Celui ci fait un appel ajax via le framework de prototype. Je fais appel à une seconde fonction lorsque le xhr est terminé.

 

composant.prototype {

 

  initialize: function(idRoot, ar) {
      this.ar = ar;
      this.include = idRoot;
      new Ajax.Request("/url",
 {
  method: 'get',
  parameters: this.getQueryString(this.idRoot),
  onComplete: handler
 }
      );
   },

 

  handler(req) {
      autreFonction(this.ar, req.responseXML);
   }
}

 


Cette ligne pose problème :

 

autreFonction(this.ar, req.responseXML);

 

Car this n'est plus mon objet mais l'élément Window...
Ma question est donc comment récupérer mon objet à cet endroit ?

 


Message édité par magicien96 le 20-04-2007 à 09:43:36

---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 09:35:56   

Reply

Marsh Posté le 20-04-2007 à 09:50:47    

Perso pour eviter ce genre de soucis , j'evite de me servir de this!

Code :
  1. composant.prototype {
  2.   var self = this;
  3.   initialize: function(idRoot, ar) {
  4.       self.ar = ar;
  5.       self.include = idRoot;
  6.       new Ajax.Request("/url",
  7. {
  8.   method: 'get',
  9.   parameters: this.getQueryString(this.idRoot),
  10.   onComplete: handler
  11. }
  12.       );
  13.    },
  14.   handler(req) {
  15.       autreFonction(self.ar, req.responseXML);
  16.    }
  17. }

Reply

Marsh Posté le 20-04-2007 à 10:01:16    

Depuis le temps que je galère là dessus, tu viens de m'enlever une énorme épine du pied :love:


---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 10:29:19    

Arg, ya un p'ti soucis avec self.
 
Comment faire lorsque tu as 2 instances du composant dans ta page ?


---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 10:46:47    

le coup du this, c'est un problème classique de "binding". La librairie prototype dispose d'une fonction qui permet de régler ce pb. Je l'avais lu dans ce bouquin : http://www.amazon.fr/Bien-d%C3%A9v [...] 730&sr=8-1
Mais je ne l'ai pas sous la main là, je ne peux donc pas te donner le code qui va bien. Peut-être que dans las doc de prototype, tu vas trouver à "bind" ou "binding"...

Reply

Marsh Posté le 20-04-2007 à 10:49:34    

J'ai vu quelques exemples de bind (en regardant le framework de rico) mais j'ai du mal à comprendre comment ça marche et donc comment l'utiliser :(


---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 11:17:18    

magicien96 a écrit :

Arg, ya un p'ti soucis avec self.

 

Comment faire lorsque tu as 2 instances du composant dans ta page ?


C'est parce que j'ai écrit nawak que ça marche pas, le self = this devrait être dans ton constructeur.
Sauf que la, je l'ai foutu dans le prototype.
A vue de nez avec ton code ça donnerait:

Code :
  1. composant.prototype {
  2. initialize: function(idRoot, ar) {
  3.      var self = this;
  4.      self.ar = ar;
  5.      self.include = idRoot;
  6. ...
  7. }


Et il n'y a plus de raison pour qu'il y ait de problèmes, même avec 400 objets de la même classe dans ta page.

 

edit: Et fait bien gaffe dans le "new Ajax.Request" c'est bien this qu'il faut laisser pour que cela pointe sur ton objet xhr. Si tu mets self ça va pointer sur ton objet component.

Message cité 1 fois
Message édité par anapajari le 20-04-2007 à 11:18:52
Reply

Marsh Posté le 20-04-2007 à 11:19:03    

Autres soucis supplémentaire:
 
Avec :
 

handler(req) {
      autreFonction(self.ar, req.responseXML);
}


 
self.ar a la bonne valeur
 
Par contre, si je fais:
 

handler(req) {
      self.autreFonction(self.ar, req.responseXML);
}


 
autreFonction n'est pas appellé  :??:  
 
 
Je suis toujours preneur pour des infos de l'utilisation de bind aussi....


---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 11:23:22    

Mais c'est normal, autreFonction n'est pas une méthode de ta classe component... [:spamafote]
 
Je sens que tu galères bien avec les classes en js :D
Je te conseille la lecture de ces trois tuts que je trouve extremement bien fait:
http://phrogz.net/JS/Classes/OOPinJS.html ( les bases des classes)
http://phrogz.net/JS/Classes/OOPinJS2.html ( héritage)
http://phrogz.net/JS/Classes/Exten [...] asses.html ( ajout de methodes/propriétés dynamiquement)

Reply

Marsh Posté le 20-04-2007 à 11:28:11    

anapajari a écrit :

C'est parce que j'ai écrit nawak que ça marche pas, le self = this devrait être dans ton constructeur.


 
 
J'avais déjà bien mis "var self = this" dans l'initialize ;)
 
En gros le soucis. Dans ma page html je fais:
 

var composant = new Composant("jesuisleroot", new Array('1', '2'));
var composant2 = new Composant("jesuisunautreroot", new Array('1', '2'));


 
et lorsque je fais
 

handler(req) {
     alert(self.idRoot);
     autreFonction(self.ar, req.responseXML);
  }


 
J'ai 2 popup qui s'affiche avec comme contenu "jesuisunautreroot" (le premier aurait du contenir "jesuisleroot" )


Message édité par magicien96 le 20-04-2007 à 11:36:55

---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 11:28:11   

Reply

Marsh Posté le 20-04-2007 à 11:36:11    

anapajari a écrit :

Mais c'est normal, autreFonction n'est pas une méthode de ta classe component... [:spamafote]
 
Je sens que tu galères bien avec les classes en js :D
Je te conseille la lecture de ces trois tuts que je trouve extremement bien fait:
http://phrogz.net/JS/Classes/OOPinJS.html ( les bases des classes)
http://phrogz.net/JS/Classes/OOPinJS2.html ( héritage)
http://phrogz.net/JS/Classes/Exten [...] asses.html ( ajout de methodes/propriétés dynamiquement)


 
Nonon, autreFonction est bien une méthode de ma classe (je factorise la méthode du code, c'est pour ça qu'il y a qqs oublis :p)
 

Framework.TreeView.prototype = {
 
 initialize: function(idRoot, ar) {
      this.ar = ar;
      this.include = idRoot;
      new Ajax.Request("/url",
      {
            method: 'get',
            parameters: this.getQueryString(this.idRoot),
            onComplete: handler
       }
      );
   },
 
   handler: function(req) {  
        var doc = req.responseXML;
        if (doc == null)
                alert("Pas de réponse XML" );    
        alert(self.idRoot);
        self.createTreeViewContent(doc, 0);
   },
 
   createTreeViewContent: function(doc, level) {
        alert('here');
   }
};


 
Et le popup here n'apparait pas...


Message édité par magicien96 le 20-04-2007 à 11:41:42

---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 11:36:33    

tu devrais passer self en paramètre de ton oncomplete et tu n'aurais plus de soucis ... Plus exactement définir handler comme une méthode de ta classe

Code :
  1. handler: function(req) {
  2.      var self = this;
  3.      autreFonction(self.ar, req.responseXML);
  4.   }


Parce que là c'est quand même super pas logique car la méthode handler est appelé par un objet (xhr) qui n'est pas de sa classe (component) :/

 

Edit: Si tu disais tout depuis le début ça irait plus vite aussi :o
Donc le var self=this faut le mettre dans toutes les méthodes de ta classe sinon ça merdouille. Ou alors continuer à se servir de this dans les méthodes. Self n'est necessaire que lorsque l'objet est passé en paramètre en dehors de la classe ( ce qui est le cas lors du retour de xhr).
Note bien le this dans ce cas là:

Code :
  1. handler: function(req) { 
  2.    var doc = req.responseXML;
  3.    if (doc == null)
  4.     alert("Pas de réponse XML" );   
  5.    alert(this.idRoot);
  6.    this.createTreeViewContent(doc, 0);
  7. },

Message cité 1 fois
Message édité par anapajari le 20-04-2007 à 11:39:15
Reply

Marsh Posté le 20-04-2007 à 11:46:47    

anapajari a écrit :


Edit: Si tu disais tout depuis le début ça irait plus vite aussi :o

 

Désolé, j'ai été trop vite pour mon premier message...

 

Je test ta solution...

Message cité 1 fois
Message édité par magicien96 le 20-04-2007 à 11:49:01

---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 20-04-2007 à 12:02:06    

magicien96 a écrit :

Désolé, j'ai été trop vite pour mon premier message...
 
Je test ta solution...


 
Ca a l'air de bien fonctionner :) Autant pour l'appel des bonnes fonctions que pour des instances multiples.
 
Je repasserais en cas de soucis :p
 
Merci en tout cas :jap:


---------------
Ils ne savaient pas que c'était impossible, alors ils l'ont fait. ©Mark Twain
Reply

Marsh Posté le 26-06-2007 à 16:08:16    

Depuis le debut tu avais raison, ton code était bon, il suffit juste de faire  
 
new Ajax.Request("/url",
{
        method: 'get',
        parameters: this.getQueryString(this.idRoot),
  onComplete: this.handler.bindAsEventListener(this)
}  
 
donc d'utiliser bindAsEventListener pour recuperer ton objet dans this


Message édité par funkymed le 26-06-2007 à 16:09:08
Reply

Sujets relatifs:

Leave a Replay

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