Discussion :

[khattat]

Salut tout le monde,
je veux savoir s'il est possible d'ajouter des elements dojo apres le chargement de la page.
Je m'explique, j'ai par exemple une page avec un formulaire qui contient initialment(lors du chargement de la page) une seul ligne d'une table(celui-ci contient 4 champs de type,text,date...), Et j'ai une bouton "ajouter ligne" qui va exécuter un code javascript qui creer une ligne "clone" de la premier ligne
Mon problème c'est que les element de la ligne creer par la fonction js n'ont pas l'apparence dojo(bien que dans le code j'ai préciser par exemple pour les champs de type date l'attribut dojoType="dijit.form.DateTextBox").

j'espère être claire dans l'explication!
Quelqu'un a une idée?

Merci en avance!

[emmanuel.remy]

Salut,

Pas de problème pour réaliser cela. Tu fais ton insertion (par exemple appelons la div racine de l'insertion div1) et ensuite tu DOIS appeler le parser dojo:

Code :

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

dojo.parser.parse(div1);

ERE

[khattat]

Vraiment Merci emmanuel.remy,
vous m'avez fait gagner beaucoup de temps.

Khattat Naji

[Loloperso]

Bonjour,

J'ai essayé de m'inspirer de ces messages car j'ai le même type de problème. A savoir, au milieu d'un formulaire je veux faire apparaître un nouveau champ sur un événement onChange. Le nouveau champ (Filtering Select) apparaît bien mais sans la mise en forme 'dojo css'...

Mon code principal JS :

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
 
function updateville(cp){
 
	dojo.byId("villeselection").innerHTML="Recherche des villes...";
 
	dojo.xhrGet( {
		url: "<?php echo POSITION.'xml/cp2ville.php'; ?>", 
		handleAs: "text",
		timeout: 5000,
		load: function(response, ioArgs) {
			dojo.byId("villeselection").innerHTML = response;
			dojo.parser.parse("enteteville");
			return response;
		},
		error: function(response, ioArgs) {
			dojo.byId("villeselection").innerHTML = 'Impossible de trouver la ville. Essayez de resaisir le code postal SVP.';
			return response;
		}
        });

Plus bas dans le Body, j'ai mon formulaire et au milieu :

Code :

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

1
2
 
<div id="villeselection"></div>

Et bien sûr l'élément qui appelle la fonction updateville :

Code :

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

1
2
3
4
5
6
7
<input dojoType=dijit.form.ValidationTextBox
	style="width: 10em;" type="text" id="entetecp" name="entetecp"
	regExp="[0-9]{5}"
	required="true"
	invalidMessage="Indiquez un code postal à 5 chiffres SVP"
	onChange="updateville()">

Pour le test, le fichier php qui est appelé (cp2ville.php) ne retourne que du HTML pour l'instant :

Code :

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

1
2
3
4
5
6
 
<select dojoType="dijit.form.FilteringSelect"
	style="width:10em;" id="enteteville" name="enteteville">
	<option>Renseignez le code postal</option>
	<option>Ou un autre...</option>
</select>

Le réponse d'emmanuel.mery semblait pile poil adaptée : "il faut appeler le parser dojo". J'ai l'impression de l'avoir fait. J'ai même essayé de ne pas mettre les guillemets autour de enteteville : dojo.parser.parse(enteteville);

D'paèrs ce que j'ai lu un peu partout néanmoins (viva google !) je me demande si le parser n'est pas en fait lancé alors que l'on attend toujours la réponse du serveur dans le xhrGet... C'est pourquoi j'ai remonté mon appel dojo.parser.parse("enteteville") dans la partie load de la fonction xhrGet...

Si c'est le problème, y-a-il une solution ? Faut-il aborder ces cas là d'une autre manière ???

Merci beaucoup !

[emmanuel.remy]

Salut,

Je crois que tu dois mettre plutôt:

Code :

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

1
2
3
4
dojo.parser.parse("#enteteville");

//ou
dojo.parser.parse(document.getElementById("#enteteville"));

Mais dans l'esprit Dojo, ce serait plutôt:

Code :

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

1
2
3
4
5
 
load: function(response, ioArgs) {
              dojo.html.set("villeselection", response, { parseContent:true });
              return response;
}

ERE

[Loloperso]

Bonjour,

La première solution ne change rien.

Code :

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

dojo.parser.parse("#enteteville");

La seconde solution fait sortir l'argument error du xhrGet...

Code :

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

dojo.parser.parse(document.getElementById("#enteteville"));

La dernière solution, "dans l'esprit Dojo", fonctionne ! Merci !! Ca fonctionne aussi bien sous FF que IE.

Par contre ça ne marche qu'une fois dans la page : en cas de onChange à nouveau, le FilteringSelect est bien mis à jour mais à nouveau avec une mise en forme non 'dojo css'.

Une idée ? sinon tant pis et merci beaucoup, ça me fait avancer quand même : je poursuis en fait mon apprentissage PHP et j'ai choisi un toolkit comme Dojo pour ne pas avoir à m'inquiéter de pas mal de choses et à rester concentré sur les problématiques que je veux approfondir. J'hésite donc à vouloir faire du parfait sur Dojo, à passer du temps, etc... mais c'est très frustrant quand même de ne pas aller au fond d'un soucis

Je ne peux pas mettre de tag 'résolu' mais c'est pourtant presque le cas, merci

[Loloperso]

J'ai une idée sur la cause de la deuxième mise à jour qui ne respecte plus le style dojo choisi ! Je la lance en l'air comme ça, sans savoir réellement comment fonctionne Dojo (je devrais éviter de faire ça je sais mais bon je cherche, je cherche...).

Postulat de base à confirmer : le Parser ne parse peut-être pas un élément qu'il a déjà parsé.

Ainsi, la première fois que le Parser tourne (au chargement de la page), il n'y a pas encore mon élément FilteringSelect.

Ensuite, il est rajouté par xhrGet (load: etc...) et le Parser accepte de le parser.

Puis la fonction dojo.html.set("villeselection", response, { parseContent:true }); est rappelée (en cas de 2ème onChange) mais le Parser considère qu'il a déjà parsé cet élément...

Si c'est le cas, j'imagine qu'il faudrait que je le détruise avant, pour que le Parser soit sûr qu'il s'agit d'un nouvel élément quand je le réinsère !?!! Mais comment faire !?

[emmanuel.remy]

La première solution ne change rien.
Code :

Code :

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

1
2
 
dojo.parser.parse("#enteteville");

Code :

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

dojo.parser.parse(dojo.byId("enteteville"));

La seconde solution fait sortir l'argument error du xhrGet...
Code :

Code :

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

dojo.parser.parse(document.getElementById("#enteteville"));

Code :

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

dojo.parser.parse(dojo.byId("enteteville"));

Par contre ça ne marche qu'une fois dans la page : en cas de onChange à nouveau, le FilteringSelect est bien mis à jour mais à nouveau avec une mise en forme non 'dojo css'.

On flirte là avec la logique de développement: normalement dès le début tu devrais créer un store et le recharger sur le onChange. Car recréer le FilteringSelect est un peu violent...

Postulat de base à confirmer : le Parser ne parse peut-être pas un élément qu'il a déjà parsé.

Ainsi, la première fois que le Parser tourne (au chargement de la page), il n'y a pas encore mon élément FilteringSelect.

Y'a de l'idée, mais non pas à ma connaissance.

Par contre tu n'es pas loin, il existe un registre (dijit.registry) qui recense tous les widgets instanciés via leur id. Je n'ai jamais été confronté à ton souci, mais je pense que tu devrais détruire ton widget avant de le recréer, histoire de rester cohérent avec le registre:

Code :

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

1
2
3
4
5
load: function(response, ioArgs) {
              if (dijit.byId("enteteville")) dijit.byId("enteteville").destroy();
              dojo.html.set("villeselection", response, { parseContent:true });
              return response;
}

Si cela ne fonctionne pas mieux on investiguera !

ERE

[Loloperso]

Merci Emmanuel,

non seulement ça marche mieux, mais en plus ça marche !! Je parle de la solution qui consiste à détruire le widget s'il existe, avant de le réintégrer.

Ca marche sous FF et IE... et même Chrome ! Les autres... euh, comment dire

J'ai envie de m'arrêter là et de rentrer cette solution dans mes tablettes pour les usages futurs mais tu dis que cette méthode est à la limite de la logique de développement... Penses-tu que je devrais me contenter de la solution que tu as trouvée, ou que je devrais dès maintenant me former au "store" dont tu parles (et donc, te demander de développer, faire un cours complet, qui dépasse le cadre d'une question sur le forum j'imagine )

En tous les cas, merci, je suis heureux de frimer avec mes effets Dojo maintenant

[emmanuel.remy]

Re,

Ca marche sous FF et IE... et même Chrome ! Les autres... euh, comment dire

ça ne marche pas avec Safari ?

A mon avis tu peux continuer comme ça, quitte à revenir dessus plus tard si on te fait une remarque (dans ce cas je pourrais te passer un code orienté store).

ERE

[Loloperso]

Hello,

En fait, les "autres", je ne les ai même pas téléchargé... donc je ne sais pas si ça marche avec. Mais pour moi ils seront dans le même sac que les soit-disant 10% d'utilisateurs qui n'activent pas JavaScript : tant pis pour eux, ils visiteront d'autres sites !

Je vais suivre ton avis : je développe pour un projet perso, donc "on" ne me fera pas de remarque

A plus tard sur d'autres topic Dojo j'en suis sûr : j'aurai d'autres questions certainement et tu as l'air d'être très actif ici