Discussion :

[Nainfou]

Bonjour,

Je suis entrain de développer mon premier plugin Jquery et j'avoue avoir bcp de mal à comprendre l'objet this, $(this), ...
J'ai un message d'erreur qui survient "Object has no method 'find'" ce qui me fait douter que pour cette méthode, mon objet this (ou $(this)) ne correspond pas.

Voici mon code :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
(function($){
	// Methodes
	var methods = {
		'init' : function(arguments){
			// Lorsque le formulaire est valide
			this.bind('submit', function(event){
				// On empeche l'envoi
				event.preventDefault();
 
				$(this).sendForm('loading', true);
 
				// On execute notre requete AJAX
				$.post("une url",
					   $(this).serialize(),
					   function(data){
							for(idx in data){
								var current = data[idx];
 
								$(this).find('[name*="' + current.key + '"]').after('<span class="erreur_form">' + current.message + '</span>');
							}
 
							$(this).sendForm('loading', false);
					   },
					   "json");
			});
 
			return this;
		},
		'loading' : function(){
			alert("En cours"
 
			return this;
		}
	};
 
	// Point de lancement
	$.fn.sendForm = function(method){
		if(methods[method]){
			return methods[method].apply(this, Array.prototype.slice.call(arguments,1));
		}
		else if(typeof method === 'object' || !method){
		    return methods.init.apply(this, arguments);
		} 
		else {
		    $.error('Method ' +  method + ' does not exist');
		}
	};
})(jQuery);

et voici l'appel :

Code :

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

$('form').sendForm();

Merci pour vos explications,
Nainfou

[danielhagnoul]

Bonsoir

Cette méthode de création de plugin est loin des méthodes éprouvées (voir la FAQ), mais elle a son charme, sous réserve de tests.

C'est une méthode personnelle ? Dans le cas contraire, auriez-vous l'amabilité de me donner un lien vers l'article de référence ?

Pour répondre à votre question, en effet "this" change de valeur sans arrêt en fonction du contexte. Voir le code.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
(function($){
	// Methodes
	var methods = {
		'init' : function(){
 
			// Lorsque le formulaire est valide
			this.bind('submit', function(event){
 
				// On empeche l'envoi
				event.preventDefault();
 
				$(this).sendForm('loading', "transaction AJAX en cours");
 
				// debug
				//console.log( this, "submit", $(this).serialize() );
 
				// On sauvegarde la valeur de this
				var self = this;
 
				// On exécute une requete AJAX
				$.post("une url", $(self).serialize(), function(data){
					var current = null;
 
					// debug
					//console.log( this, self);
 
					for(idx in data){
						current = data[idx];
 
						$(self).find('[name*="' + current.key + '"]').after('<span class="erreur_form">' + current.message + '</span>');
					}
 
					$(self).sendForm('loading', "transaction AJAX terminée");
				}, "json");
			});
 
			return this;
		},
		'loading' : function(msg){
			alert(msg);
 
			return this;
		}
	};
 
	// Point de lancement
	$.fn.sendForm = function(method){
		if (methods[method]){
			return methods[method].apply(this, Array.prototype.slice.call(arguments,1));
		}
		else if (typeof method === 'object' || !method){
		    return methods.init.apply(this, arguments);
		} 
		else {
		    $.error('Method ' +  method + ' does not exist');
		}
	};
})(jQuery);

[Nainfou]

Elle vient de la doc officiel :p http://docs.jquery.com/Plugins/Authoring
Il ne donne pas tout et je me suis peut-être un peu emballé.

Au départ, je conservais mon objet "this" comme tu le montres avec une variable "self" et je pense revenir à cette méthode donc ...

Dans la FAQ, il s'agit de créer des fonctions et on perd le côté "objet" du plugin que je trouve plus "propre".

Merci beaucoup de votre aide,
Nainfou

[danielhagnoul]

http://docs.jquery.com/Plugins/Authoring

Lorsque j'ai étudié le jQuery, je n'ai pas le souvenir d'avoir vu cette méthode de construction de plugin sur cette page. Elle semble être le résultat des travaux sur le code du "widget" de jQuery UI.

Les versions de jQuery changent si vite que je devrais relire régulièrement la totalité de la documentation. Ce que, hélas, j'ai rarement le temps de faire. Je n'avais plus relu cette page depuis au moins trois ans.

Pour l'écriture d'un plugin simple, je conseille toujours les méthodes décrites dans la FAQ et dans Mon Cahier d'Exercices, voir aussi l'article : Adapter jQuery à vos besoins.

Mais, pour un plugin très élaborer, cette méthode me semble utile. Je compte bien lui consacrer un peu de temps dès que possible.