Discussion :

[illeriane]

Bonjour,

J'expose le contexte:
Je crée un formulaire qui doit s'adapter au fur et a mesure qu'il est remplis. A savoir, il possède 2 input text au départ (nommés qtt0 et reduc0), dés que l'un de ces éléments perd le focus, une fonction javascript est déclenchée et vérifie qu'ils sont remplis, si c'est le cas, elle ajoute 1 ligne au tableau et dans cette ligne place deux nouveaux champs (només qtt1 et reduc1).

L'idée c'est que ces champs se comportent de la même façon que les premiers et soient capable de créer deux nouveaux champs ... et ainsi de suite.

La fonction est déclenché sur le onblur et possède un paramètre (le numéro de la ligne).

Arborescence (pour mieux comprendre)
form
--table
----thead.../thead
----tbody
------tr
--------td
----------input
--------/td
--------td
----------input
--------/td
------/tr
------tr
--------td
----------input
--------/td
--------td
----------input
--------/td
------/tr
------...
----/tbody
--/table
/form

Mon problème est le suivant:
Je ne parviens pas a attribuer onblur dans les nouveaux inputs. le processus s'arrête donc dés que l'utilisateur a entré les premiers.

(Il semblerais que le problème soit l'argument de la fonction.)
J'ai essayé deux techniques et aucune des deux n'a fonctionné. La première d'entre elles etait de rentrer un text correspondant au nom de ma fonction avec le paramètre

Code :

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

1
2
3
4
5
6
7
8
 
function maFonction(num)
{
	[...]
	var input1 		= document.createElement('input');
	input1.onblur	= 'maFonction('+(num+1)+');';
	[...]
}

la seconde a été de créer une fonction dynamique:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function maFonction(num)
{
	[...]
	var input1 		= document.createElement('input');
	input1.onblur	= function()
				{
					maFonction(num+1);
				};
	[...]
}

Voila, si vous avez une idée.
Je précise tout de même que les autres éléments (name, id, etc) sont affectés par la même méthode (input1.name=...) et qu'ils sont effectivement affectés dans ma page.

Merci d'avance pour votre aide.

[E.Bzz]

Bonjour,
enlève le paramètre de maFonction() et remplace le par une variable globale.
Tu pourras faire

Code :

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

input1.onblur = maFonction;

A+

[illeriane]

Bonjour,

En fait, le paramètre permet de savoir quel champ envoie l'évènement. Si il s'agit de la dernière ligne, l'avant dernière ou la première etc. Une variable globale m'indiquera toujours la même valeur quel que soit l'initiateur de l'évènement...

Je vais regarder d'ailleur s'il y a moyen de récupérer le père d'un évènement en js. (le numéro du champ étant contenu dans l'id de l'input, je pourrais alors récupérer l'emplacement exact par rapport au nombre total d'éléments ... )

[SpaceFrog]

Code :

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

1
2
3
4
input1.onblur	= function(num)
				{
					maFonction(num+1);
				};

[E.Bzz]

Une variable globale m'indiquera toujours la même valeur quel que soit l'initiateur de l'évènement...

Pas si tu l'incrémentes à chaque création d'input ...

Mais la version de SpaceFrog est plus propre

A+

[illeriane]

Je viens d'essayer en passant en paramètre la variable (comme l'indique space frog) mais le onblur n'apparait toujours pas dans les inputs ...

Il n'y a pas moyen de récupéré le dernier évènement levé?

Pas si tu l'incrémentes à chaque création d'input

il me semble que si j'incrémente a chaque fois, si j'ai 4 champs, ma variable globale sera a 4, j'en rajoute un via ma fonction, elle passera a 5, si mon évènement proviens du 1er input, j'aurais 5 ... non 1 (puisqu'elle est incrémentée pour la page courante pas juste pour le input).

[E.Bzz]

il me semble que si j'incrémente a chaque fois, si j'ai 4 champs, ma variable globale sera a 4, j'en rajoute un via ma fonction, elle passera a 5, si mon évènement proviens du 1er input, j'aurais 5 ... non 1 (puisqu'elle est incrémentée pour la page courante pas juste pour le input).

Tout dépend à quoi te sert ce num au final.
Je croyais que c'était le nombre de champs déjà présents ...

Et puis ça revient au même il me semble : il faut bien que tu le définisses avant de le passer en paramètre ....
Alors paramètre ou variable globale, le résultat est le même.

A+

[illeriane]

Je n'ai pas du m'exprimer correctement. Chaque input doit avoir un onblur="maFonction(x)" ou x est le numéro du input. Dans la fonction, je teste ce paramètre pour vérifier si l'input origine de l'évènement n'est pas le dernier ou l'avant dernier de la liste. Si c'est le dernier, j'ai un traitement (qui rajoute un nouveau champ et incrémente la variable globale contenant le nombre de champs), si c'est l'avant dernier, je supprime le dernier input (enfin, il y a une série de vérification de contenue entre mais passons). la résolution de mon évènement dépendant de l'emplacement de l'input, j'ai besoin de connaitre son id/ numéro.

Je me disais en ecrivant cela qu'il sera peut être plus simple de passer par deux fonctions différentes et de modifier le onblur des champs concernés pour leur attribuer la bonne fonction...

a voir (votre avis c'est quoi?) je re-post après le test.

[SpaceFrog]

onblur n'apparait toujours pas dans les inputs ...

n'apparait pas ??? tu veux dire quoi exactemnt par n'apparait pas ...
tu ne le verras pas dans le code source ou alors seulement avec un addon spécial sous ffx (view generated source )

[illeriane]

n'apparait pas ?

oui, firebug m'indique les nouveaux éléments au fur et a mesure qu'ils sont créés. Tous les attributs des inputs sont présents sauf le onblur. De plus, rien ne se passe a la perte de focus ^^.

[SpaceFrog]

essaye avec addeventListener ?

[illeriane]

essaye avec addeventListener ?

Tu veux dire avec un nouvel objet par élément? (chaque objet étant initialisé avec l'id/ numéro de l'input) ... Ainsi, l'évènement sera capté par l'objet qui connaitra lui-même l'élément déclencheur et qui pourra ainsi effectuer le traitement adéquat ... c'est proche du java, j'aime bien l'idée

Je tente.

[E.Bzz]

Tu veux dire avec un nouvel objet par élément? (chaque objet étant initialisé avec l'id/ numéro de l'input) ... Ainsi, l'évènement sera capté par l'objet qui connaitra lui-même l'élément déclencheur et qui pourra ainsi effectuer le traitement adéquat ... c'est proche du java, j'aime bien l'idée

Je tente.

C'est une solution possible, mais très éloignée de la suggestion de SpaceFrog, me semble-t-il

addeventListener est juste un autre moyen d'affecter maFonction() au onblur

A+

[illeriane]

Mwahaha,

C'est une solution possible, mais très éloignée de la suggestion de SpaceFrog, me semble-t-il

oui mais moi j'aime ca l'objet (vice ou pas? )

Problème résolu. Je ne connaissais pas addEventListener avant mais c'est très pratique! Bon, il a fallu que je trouve la définition de l'interface EventListener (parceque bon, une interface en js ...) mais une fois qu'on a son objet c'est tranquille, tout roule!

Si cela peut aider d'autres personnes qui auraient un problème similaire au mien:

Déclaration du "constructeur" de l'objet qui sera appelé au déclenchement de l'évènement (remarquez que ce n'est que sa fonction appelée "handleEvent" qui sera appelée ...)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
/*
 * La fonction suivante permet de construire un objet Evnt dont le numero est i. Cet objet permettra d'écouter des évènements et déclenchera la methode handleEvent lors du déclenchement de l'évènement en question.
 * @param i : le numero (ou l'id) de l'élément.
 */
function Evnt(i)
{
	// initialisation de num a i
	this.num = i;
	// definition de la fonction déclenchée lors de l'évènement. Ici, elle appelera la fonction maFonction.
	this.handleEvent = function(ev){maFonction(this.num);};
}

affectation de l'écouteur d'évènements sur l'évènement onblur et sur l'élément définit par son id

Code :

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

1
2
3
4
5
 
// on crée l'objet écouteur en lui même.
var obj = new Evnt(id);
// on récupère l'élément sur lequel associé un écouteur et on lui applique la fonction. Le premier paramètre défini l'évènement écouté (ici blur, c'est a dire la perte de focus) le second paramètre est l'objet écouteur, et le troisième indique si l'évenement doit être initialisé par l'utilisateur (eu, j'ai pas compris ca ...)
document.getElementById(id).addEventListener('blur', obj, false);

ensuite, bah vous adaptez a vos besoins ^^. Pour ma part, la fonction maFonction supprime une ligne a un tableau ou en rajoute une avec des inputs auxquels j'affecte (toujours avec la même méthode) un écouteur sur onblur.

Voila, je met le sujet en résolu