Discussion :

[Leduc08]

Bonjour,

J'ai un problème assez récurent en JavaScript lié à la visibilité de mes variables.
Je vais mettre un bout de code tout simple et je vous demanderais de me dire comment vous auriez procédé:
C'est l'ébauche d'une classe pour gérer la traduction.

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
 
function Translation()
{
	var translationTable;
	this.translateEntoFR = function(stringToTranslate)
	{
		console.log(stringToTranslate);
		console.log(this.translationTable);
	}
 
	Ext.Ajax.request({
	    url: 'common/gettraductiontable?ajax=1',
	    callback: function(options,success,response){
	    //this.translationTable=Ext.util.JSON.decode(response.responseText);
              // version simplifiée pour l'exemple:
               this.translationTable = ('yes:oui')
	     }
	 });
}

Mon problème est que this.translationTable reste "undefined" car dans le e Ext.Ajax.request, le this n'est plus reconnu.
Comment faire pour sortir le résultat de la requête des "({})" de l'Ext.Ajax.request?

D'avance merci pour votre aide.

[sekaijin]

poster les question extj dans le forum dédier

mais voici la réponse

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
function Translation()
{
  this.translationTable=null;
  this.translateEntoFR = function(stringToTranslate)
  {
    console.log(stringToTranslate);
    console.log(this.translationTable);
  }
 
  Ext.Ajax.request({
      url: 'common/gettraductiontable?ajax=1',
      scope: this,
      failure: function(response, requester){
          console.log(requester.url + ' : ' + response.statusText)
      },
      success: function(response, requester){
        requester.scope.translationTable = Ext.util.JSON.decode(response.responseText);
      }
  });
}

l'autre solution consiste à utiliser createCallBack

pour info il ne s'agit pas là d'un pb de portée de variable mais d'un pb de référence.

dans le début de la fonction on définit un membre de l'objet. ensuite on fait appel Ext.Ajax.request auquel on passe en paramètre un objet définit à la volé

Code :

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

1
2
{
      url:...}

est un objet this dans cet objet est l'objet lui même par définition.

donc déjà la référence n'est pas l'objet de départ mais celui construit dynamiquement.

Code :

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

1
2
3
4
5
6
7
8
test = function() {
 this.truc=45;
 this.toto =  {
    fn: function() {
      alert(this.truc); //error this ici c'est l'objet test.toto et non l'objet test
    }
 }
}

ensuite la fonction Ext.Ajax.request créé un objet request (XHR) et copie tout les champs de l'objet qu'on lui à fourni en paramètre dans l'objet request.

les méthodes sont alors détachées de leur objet originel et pour être attaché à cet objet request. this est donc à l'exécution c'est objet request.


A+JYT

[Leduc08]

Bonjour Sekajin,

Désolé pour l'erreur d'emplacement de POST, j'étais persuadé que cette problèmatique était liée au javaScript et non à l'ExtJS.

Merci pour ta réponse, mais malheureusement elle ne semble pas fonctionner chez moi.
Le console.log de ma méthode translateENtoFR me renvoi "null", j'en déduis donc que ce qui est fait dans l'"Ext.Ajax.request" n'est pas appliqué à ma variable translationTable, ou est effectuée après.
En tous cas je vais creuser au niveau du "requester.scope."

PS: Tu me confirmes que le sekajin qui poste sur le forum Zend est le même que celui qui poste ici? ;-)

[sekaijin]

la réponse ajax est asynchrone
donc à priori tu ne sais pas quand success sera appelé.

A+JYT

[Leduc08]

Merci pour la réponse.

Ok sur l'asynchrone, du coup je modifie mon code pour que cela fonctionne et ça me donne ç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
 
function Translation()
{
  this.translationTable=null;
  this.translateEntoFR = function(stringToTranslate)
  {
	  Ext.Ajax.request({
	      url: 'common/gettraductiontable?ajax=1',
	      scope: this,
	      failure: function(response, requester){
	          console.log(requester.url + ' : ' + response.statusText)
	      },
	      success: function(response, requester){
	        requester.scope.translationTable = Ext.util.JSON.decode(response.responseText);
	        console.log(this.translationTable);
	      }
	  });
  }
}

Maintenant, le but est d'initialiser une seule fois la classe Translation, de récupérer mon tableau de traduction 1 seule fois, et ensuite d'appeler la méthode translateENtoFR pour chaque champ à traduite.
--> En php, j'aurai mis l'appel a la requête AJAX dans le init de la classe, mais en javascript la méthode proposée était celle que j'ai mis dans mon premier exemple (incompatible avec la requête asynchrone), quelle est donc la bonne méthode?

Encore merci pour ton aide.

[eemmaa]

une petite question ... pourquoi ne peut t-on pas faire le console.log à l'extérieur de l'Ajax.Request?