[résolu] Javascript objet et évènements

Salut,

Je vois pas trop ce que tu veux faire avec ta méthode là en fait...
Je vois pas ton but final.

En faisant quelques recherches, j'ai fini par trouver un post sur Alsacréation traitant d'exactement le même problème :

http://forum.alsacreations.com/topic-5-20948-1-resolu-P...

Pour être plus précis, ce que je cherche à faire c'est l'affichage de villes dans une liste déroulante en fonction d'un code postal saisit dans un champ texte, et tout ça en programmation objet (pour tout simplement pouvoir gérer plusieurs objets).

Grâce à l'exemple posté sur Alsacréation j'ai réussis à trouver une solution à mon problème.
Voilà donc ce que donne cette classe :

var CityList = Class.create();

 
CityList.prototype = {

 
	//Méthode d'initialisation ; constructeur de la classe

	initialize: function (idContainer, idCode, idList) {

		//Création des attributs

		this.container = $(idContainer);

		this.code = $(idCode);

		this.idList = idList;

		this.value = null;

		//Cette ligne permet d'initialiser le conteneur avec une liste vide uniquement si celle-ci n'existe pas déjà !

		!$(idList) ? this.reset() : false;

 
		//On récupère l'objet dans une variable pour les listeneurs

		var o = this;

 
		//----------------------------------------------------

		// Gestion des évènements sur le champ du code postal

		//----------------------------------------------------

 
		//Touche de clavier pressée

		Event.observe(this.code, 'keydown', function (e) {

			var c = this.prototype = CityList.prototype;

			c.actionOnKeyboard(Event.element(e), o, true);

		});

		//Touche de clavier relevée

		Event.observe(this.code, 'keyup', function (e) {

			var c = this.prototype = CityList.prototype;

			c.actionOnKeyboard(Event.element(e), o, false);

		});

 
		//----------------------------------------------------

	},

 
	//Action sur le clavier

	actionOnKeyboard: function (el, o, onPress) {

		//Si l'on est en train de presser la touche...

		if (onPress)

			// on mémorise la valeur du champ code postal

			o.value = el.value;

		else

			//... sinon (touche relevé), on affiche la liste de villes

			o.display(el.value);

	},

 
	//Affichage de la liste des villes ; requête AJAX au serveur

	display: function (v) {

		//Le "v != this.value" permet de vérifier si la valeur du code postal au moment du relachement de la touche du clavier est bien différente de celle mémorisée au moment de la pression, c'est à dire si la valeur du champ a bien changé entre les deux actions (par ex. si l'on avait appuyé sur SHIFT, il n'y aurait pas eu de changement et on enverrait une requête au serveur pour rien...)

		//Le reste sert à vérifier si le code postal est bien valide

		if (v != this.value) {

			if (v.match(/^[0-9]{3,4}0$/) && parseInt(v) >= 1000 && parseInt(v) <= 95880) {

				//En attendant la réponse du serveur, un loader remplace la liste déroulante dans le conteneur

				this.container.innerHTML = '<img src="image/loader.gif" alt="Loading" />';

 
				//Envoi d'une requête AJAX à un fichier PHP permettant de récupérer les villes correspondant au code postal saisit (la liste des villes est stockée dans une base de données)

				new Ajax.Updater(this.container.id, 'getCityList.php', {

					method: 'post',

					postBody: 'code=' + v + '&id_list=' + this.idList + '&ajax=1'

				});

			}

			else

				this.reset();

		}

	},

 
	//Réinitialisation du conteneur (liste déroulante vide et désactivée)

	reset: function () {

		this.container.innerHTML = '<select id="' + this.idList + '" disabled="disabled"><option></option></select>';

	}

 
}

La partie qui me posait problème est celle où l'élément (champ de texte code postal) devait interagir avec l'objet de la classe CityList correspondant. En bref, toute la partie que j'ai commenté "Gestion des évènements sur le champ code postal".
J'avoue ne pas avoir très bien saisie la ligne "var c = this.prototype = CityList.prototype" mais je sais qu'elle joue un grand rôle dans la solution au problème ^^

En fin de compte je m'aperçois que le titre que j'ai mis au sujet n'est pas très adapté... "Javascript objet et les évènements" aurait été plus proche du problème mais tant pis...

En espérant que ce sujet puisse resservir à d'autres ! (le Javascript orienté objet est assez délicat)

Je suppose que l'on doit pouvoir remplacer

var c = this.prototype = CityList.prototype;
c.actionOnKeyboard(Event.element(e), o, true);

par

CityList.prototype.actionOnKeyboard(Event.element(e), o, true);

C'est juste pour avoir accès au prototype de ta classe depuis l'évènement, car comme tu l'avais vu this.prototype te retournait les propriétés de ton évènement et pas de ta classe.


Ah ça...  

En effet, ça fonctionne tout aussi bien comme ça. Merci Omar pour cette précision  

Sinon, j'ai édité le script car il y avait quelques petites erreurs de syntaxe et d'algorithme (j'avais pas le script sur moi au moment où j'ai posté donc j'ai tout retaper de tête ^^")

En tout cas c'est sympa de revenir poster les réponses que tu as pu trouver.
Désolé de pas avoir pu t'aider.