objet appel externe et domready [Résolu]

[mjeandon]

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

Code :

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 :

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 :

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 :

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 :

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 :

this.couleur_creation = coul_creation

Et on l'utilise également avec this :

Code :

alert(this.couleur_creation );

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

Code :

ajax_file: 'myfile.php'

Mais vous l'utilisez avec this :

Code :

alert(this.ajax_file);

[mjeandon]

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

Code :

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 :

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 :

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 :

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 :

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 :

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