Discussion :

[mjeandon]

Bonjour à la cantonade,
je veux appeller une fonction interne d'un objet mais avec domready (mootools)

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
 
function Formulaire() {}
Formulaire.prototype = {
	couleur_creation: undefined,	
	init: function (coul_creation) {
		this.couleur_creation = coul_creation;
	        window.addEvent('domready', function() {this.pourCreation();});	
	},
	pourCreation: function() {
		alert('creation');
       }
}
 
myform = new Formulaire();
myform.init('#dcfbdc');

Alors ca ne trouve pas le this.pourCreation()
ce qui est normal car ca s'execute en dehors de l'objet
j'ai essayé avec Formulaire.pourCreation();
mais c'est pas mieux.

Bien sur avec

Code :

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

1
2
3
4
 
myform = new Formulaire();
myform.init('#dcfbdc');
window.addEvent('domready', function() {myform.pourCreation();});

la ca marche, mais je ne suis plus dans l'objet...

Auriez vous une solution. Merci!

[NoSmoking]

Bonsoir,
il te faut encapsuler le fonction dans une fonction anonyme à laquelle tu passes ton objet en paramètre

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
Formulaire.prototype = {
  couleur_creation: undefined,
  init: function (coul_creation) {
    this.couleur_creation = coul_creation;
    // encapsulage dans fonction anonyme
    (function( obj){
      window.addEvent( 'domready', function(){
          obj.pourCreation();
        });
    })(this); // passage de this en parametre
  },
  pourCreation: function(){
      alert(this.couleur_creation );
    }
}

[vermine]

Bonjour,

Je ne suis pas sûr que la référence au domready puisse se faire à l'intérieur d'un objet.

Votre seconde tentative est la bonne, il me semble. Voici comment je l'ai retravaillée :

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
 
function Formulaire() {}
 
Formulaire.prototype = {
	couleur_creation: undefined,	
	init: function (coul_creation) {
		this.couleur_creation = coul_creation;
 
	},
	pourCreation: function() {
		alert(this.couleur_creation);
       }
}
 
 
myform = new Formulaire();
myform.init('#dcfbdc'); 
 
window.addEvent('domready', function() {
 
   myform.pourCreation();
 
});

J'ai bien précisé alert(this.couleur_creation);.


Edit : Et bien on dirait que la version de NoSmoking fonctionne également.

[mjeandon]

Merci de vos rapides reponses.

NoSmoking, j'aurai jamais trouvé ca tout seul, d'ailleurs, y aurait-il un tuto qui causerait de ces "encapsulage dans fonction anonyme" car j'avoue c'est un peu abstrait pour moi, je vois que ca marche, mais de la à comprendre le fonctionnement!

J'ai d'autre part un 2eme probleme, presque similaire au précédant - appel d'une function interne à l'objet de l'exterieur, avec un bouton et son "onclick"

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
 
function Formulaire() {}
 
Formulaire.prototype = {
	ajax_file: 'myfile.php',
	createButtons: function() {
		if (document.getElementById('panelButtons')) {
			inp = document.createElement('input');
			inp.type = 'button';
			inp.value = 'Modifier';
			inp.id = 'btn_modify';
			if (document.addEventListener) {
				inp.addEventListener('click',this.pourModifier,false);
			}	
			else if (document.attachEvent) {
				inp.attachEvent('click',this.pourModifier);
			}		
			document.getElementById('panelButtons').appendChild(inp);
                }
        },
        pourModifier: function() {
                alert(this.ajax_file);
        }
}

Quand je clique sur le bouton, je rentre bien dans la function "pourModifier"
mais les variables sont undefined
et le "alert" affiche "undefined"

Avez vous une soluce?!!! Merci de votre aide.

[vermine]

Si l'on regarde votre premier exemple, vous initialisez votre variable avec this :

Code :

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

this.couleur_creation = coul_creation

Et on l'utilise également avec this :

Code :

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

alert(this.couleur_creation );

Dans votre second exemple, vous initialisez la variable sans this :

Code :

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

ajax_file: 'myfile.php'

Mais vous l'utilisez avec this :

Code :

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

alert(this.ajax_file);

[mjeandon]

non non c'est pareil
j'ai essayé avec

Code :

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

1
2
3
4
5
6
7
 
	initAjax: function(file) {
		this.ajax_file = file;
	}
...
 
myform.initAjax('myfile.php');

C'est pareil
j'ai toujours le alert qui renvoi "undefined"

[NoSmoking]

je ne sais par quel bout commencer...
...this fait référence à l'objet en cours.

Lorsque que tu es dans la définition de l'objet, le this représente effectivement l'objet, mais lorsque tu écris inp.addEventListener('click',this.pourModifier,false);, l'objet en cours, au moment de la réalisation de l'événement click, sera le bouton sur lequel tu viens de cliquer, d'où la réponse undefined car effectivement ton button n'a pas de méthode pourModifier.

Pour palier à ce problème de closure, il existe plusieurs façons de faire.

La méthode la plus simple, si tu n'as pas d'autre événement à mettre sur le onclick de ton button est de faire au plus simple
si l'on écrit...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// NE MARCHE PAS
  createButtons: function() {
    if (document.getElementById('panelButtons')){
      inp = document.createElement('input');
      inp.type  = 'button';
      inp.value = 'Modifier';
      inp.id    = 'btn_modify';
      document.getElementById('panelButtons').appendChild(inp);
      inp.onclick  = function(){
        this.pourModifier();
      }
    }
  }

...le this, on la vu ci dessus, référencera le button donc cela plantera, il faut garder une référence sur l'objet "créateur", pour se faire on affecte au button une propriété qui mémorise l'objet "créateur"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  createButtons: function() {
    if (document.getElementById('panelButtons')){
      inp = document.createElement('input');
      inp.type  = 'button';
      inp.value = 'Modifier';
      inp.id    = 'btn_modify';
      inp.obj   = this;           // on garde la reference le this est l'objet en cours
      document.getElementById('panelButtons').appendChild(inp);
      inp.onclick  = function(){
        this.obj.pourModifier();  // on appel la methode de l'objet createur via le this.obj
      }
    }
  }

On peut également, en utilisant une fonction anonyme comme vu précédemment passer l'objet en paramètre de la fonction, cela permet de ne pas surcharger l'objet button

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  createButtons: function() {
    if (document.getElementById('panelButtons')){
      inp = document.createElement('input');
      inp.type  = 'button';
      inp.value = 'Modifier';
      inp.id    = 'btn_modify';
      document.getElementById('panelButtons').appendChild(inp);
      (function( obj){
        inp.onclick  = function(){
          obj.pourModifier();
        }
      })(this); 
    }
  }

Si tu tiens à tout prix à passer par un addEventListener ou un attachEvent, le principe doit rester le même.

Il existe d'autres méthodes pour y arriver, passage par l'appel d'une fonction qui retourne la référence à la fonction...etc...mais bon

je te propose de lire Programmation objet, il n'y a rien à jeter, tout à dévorer en 3 parties

[mjeandon]

SUPER

J'avais essayé de faire le genre 2e methode sans succes
faut dire que la syntaxe de la methode orpheline est un peu tordue

Je vais me replonger dans les 3 volumes de "developpez" car j'avait zappé "this function"

Merci encore.

[mjeandon]

Apres un peu d'abscence, je reviens vers vous, car je suis un mauvais-mauvais, et je ne trouve pas la reponse tout seul.

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 Formulaire() {
        ......
	this.pourValidation = function() {
		jsonRequest = new Request.JSON({url: this.ajax_file,
			onSuccess: this.retour_ajaxFormulaire,
			onFailure: this.erreur_ajax
		});
		tablo['cas'] = 'save';
		tablo['table'] = 'adresses';
		...
		jsonRequest.post(tablo);	
        }
	this.retour_ajaxFormulaire = function(json) {
               this.pourAffichage(json.retour);
        }
        this.pourAffichage = function(value) {
               alert(value);
        }
}

Alors bien sur ca ne marche pas, le retour du traitement ajax ce fait bien dans la function retour_ajaxFormulaire, mais le "this.pourAffichage" n'est pas trouvé.

J'ai essayé en mettant

Code :

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

1
2
3
4
5
6
 
	this.retour_ajaxFormulaire = function(json) {
               (function(obj,valeur){
      			obj.pourAffichage(valeur);         	        		
    		})(this,json.retour);	
        }

mais ce n'est pas mieux...

[NoSmoking]

ce que l'on a dit sur ce post devrait t'intéresser...