Bonsoir à tous,
Je tente (très difficilement) de faire de la "POO" avec Javascript, et je bloque depuis quelques heures maintenant sur une bêtise :

J'ai crée une méthode :

this.searchfield = function(_id,_url,_limit) {
// Du code
this.searchF = function(e) {
	alert(e);
}
// Du code
}

Ensuite, je voudrais utiliser un événement jQuery pour vérifier si une touche est relevée. Là, tout se complique, je n'arrive pas à appeler ma fonction searchF depuis mon évènement jQuery (qui est défini lui aussi dans la "classe" searchfield()).

J'ai essayé plusieurs trucs :

/* Définition de jQ */
this.jQ = jQuery('....');

/* Essai 1 */
this.jQ.bind('keyup',function(e) {
		searchF();
});
// Erreur : searchF is not a function
// J'ai essayé l'équivalent this.jQ.keyup(function(e){ .....

/* Essai 2 */
this.jQ.bind('keyup',function(e) {
		this.searchF();
});
// Erreur : searchF is not defined


/* Essai 3 */
this.jQ.keyup(this.searchF('salut'));
});
// Fonctionne, mais se lance tout de suite alors que je n'ai appuyé sur aucune touche, 
// et en plus, pas possible de récupérer le code de  la touche du clavier relevée

J'ai mis des this pour chacune de mes variables / fonctions, car j'instanciais plusieurs fois ma fonction searchfield, le problème étant qu'il m'écrasait chaque paramètre de mes instances (si je ne mettais pas this) par ceux de la nouvelle instance, d'où n'importe quoi :/

Quelqu'un aurait-il une idée svp ?

Bonne "soirée"

J'avoue avoir un peu de mal à comprendre, tu donnes des bouts de codes mais sans le contexte qui va avec. Peux-tu poster ton code en entier ?

Bonjour,

Voici mon code :

this.searchfield = function(_id,_url,_limit) {

this.id = _id;
this.url = _url;
this.limit = _limit;

this.jQ = jQuery(this.id); 
this.ul = jQuery('ul#searchField');

this.searchF = function(e) {
	alert(e);
}

this.jQ.bind('keyup',function(e) {
		searchF();
});
// Erreur : searchF is not a function



}

var zipCode = new searchfield('#zipCode','ajax/list-city',15);

Mon problème étant d'appeler la méthode searchF depuis mon événement keyup, et de passer en paramètre le code de la touche du clavier (grace à keyCode)

Bonne journée

this.searchfield = function(_id,_url,_limit) {

this.id = _id;
this.url = _url;
this.limit = _limit;

this.jQ = jQuery(this.id); 
this.ul = jQuery('ul#searchField');

this.searchF = function(e) {
	alert(e);
}

this.jQ.bind('keyup',this.searchF);
// Erreur : searchF is not a function



}

var zipCode = new searchfield('#zipCode','ajax/list-city',15);

essai comme ça ?

Je te remercie pour ta réponse

Effectivement, en enlevant les parenthèses (l'argument étant passé par défaut apparemment) ça fonctionne

Mais maintenant, c'est ma méthode searchF qui ne fonctionne pas

Voici mon code, avec la modification de la méthode searchF :

this.searchfield = function(_id,_url,_limit) {

this.id = _id;
this.url = _url;
this.limit = _limit;

this.jQ = jQuery(this.id); 
this.ul = jQuery('ul#searchField');

this.startList = function(){
    	alert(this.id);
    	var str = this.jQ.val();
    	

		if(str.length > 0){

			this.createList(str);

		} else {

			this.clearList();

		};	

	};


this.searchF = function(e) {
	alert(this.id); // Pour tester : renvoie bien l'identifiant.
	switch (e.keyCode) 
        { 
            case 37: // flèche gauche 

                break; 
            case 39: // flèche droite 

                break; 
            default:
            	this.startList(); // Erreur : this.startList is not a function
            	break;
        }
}

this.jQ.bind('keyup',this.searchF);

}

var zipCode = new searchfield('#zipCode','ajax/list-city',15);

Je ne comprend pas pourquoi this.id retourne bien l'élément, et this.startList n'est pas une fonction ?

EDIT : En fait, non ça fonctionne carrément pas, car quand j'utilise this.id, this fait en fait désormais référence à mon élément jQuery (donc this.val() etc....) et donc, je ne peux pas par exemple récupérer mes paramètres this.url, this.startList etc.....

Comment puis-je faire svp

this.id retourne l'id de ton élément, pas celui enregistré dans ton objet. C'est pour ça que ça te parait bon.

Il y a plusieurs solutions à ton problème :

Une bonne grosse closure

this.searchF = (function(that) {
	return (function(e) {
		(function(e) {
			alert(this.id); // Pour tester : renvoie bien l'identifiant.
			switch (e.keyCode) 
		        { 
		            case 37: // flèche gauche 
		
		                break; 
		            case 39: // flèche droite 
		
		                break; 
		            default:
		            	this.startList(); // Erreur : this.startList is not a function
		            	break;
		        }
		}).apply(that, e);
	});
})(this);

pros:
- ça marche!
- pas besoin de changer la fonction en elle-même
cons:
- c'est d'un compliqué! oO
- difficilement réutilisable

Une plus petite closure

var that = this;
this.searchF = function(e) {
	alert(that.id); // Pour tester : renvoie bien l'identifiant.
	switch (e.keyCode) 
        { 
            case 37: // flèche gauche 

                break; 
            case 39: // flèche droite 

                break; 
            default:
            	that.startList(); // Erreur : that.startList is not a function
            	break;
        }
}

pros:
- ça marche aussi
- rapide et facile à mettre en place
cons:
- obligation de changer tout les "this" de la fonction en "that" (en passant par ctrl+h ça passe tout seul)

Une closure automatisé

Function.prototype.bind = function() {
	var fct = this, args = $(arguments);
	args.shift();
	
	return function() {		
		return fct.apply(_this, args.concat($(arguments)));
	}	
}

this.searchF = function(e) {
	alert(this.id); // Pour tester : renvoie bien l'identifiant.
	switch (e.keyCode) 
        { 
            case 37: // flèche gauche 

                break; 
            case 39: // flèche droite 

                break; 
            default:
            	this.startList(); // Erreur : this.startList is not a function
            	break;
        }
}.bind(this);

pros:
- ça marche encore
- rapide et facile à mettre en place
- pas besoin de modifier la fonction
cons:
- il faut modifier le prototype de Function


===


Personnellement, je préfère la dernière solution

Pour comprendre comment fonctionne une closure, n'hésite pas à cliquer sur le lien de ma signature.

je te remercie, je regarde ça ce soir et je te tiens au courant
Bonne journée

EDIT :
Je viens de tester, et ça fonctionne bien désormais, merci beaucoup
J'ai privilégié la seconde solution qui m'a paru la plus simple à mettre en œuvre
Avant de poster, je m'étais justement posé la question (après avoir vu ton tuto) si les closures s'adaptaient à cette utilisation, mais étant un piètre développeur niveau javascript, et manquant de temps, j'avais eu du mal à comprendre le tuto.

Quand j'aurais plus de temps, je le lirais à tête reposé

En tout cas, merci

Bonne soirée