dojo 1.5.0 Créer dynamiquement autant d'objets dijit.form.dateTextBox que nécessaire [Résolu]

[Dendrite]

Bonjour,

Je dois être une des rares grandes débutantes en Dojo à oser poser ma question ici :

Je fais un formulaire où quand la personne clique n phases, doit se développer dans la zone de formulaires n sous-formulaires, du type

OBJET MACHIN

phase 1
Intitulé
Début
Fin
Application liée
Url de l'application liée

phase 2
Intitulé
Début
Fin
Application liée
Url de l'application liée

Vous voyez le genre ?

Pour ce, il me faut pour les champs début et fin créer dynamiquement des dijit.form.dateTextBox.
J'ai bien songé à faire une recherche du type "dijit.form.dateTextBox programmatic" mais je n'ai pas su trouver ce qui correspond à mon besoin dans la doc Dojo...
C'est mon premier widget Dojo, (que je suis parvenue à créer en mode "declarative"), merci de votre indulgence.

[vermine]

Bonjour et bienvenue sur le forum Dojo.

Dans la doc officielle, si vous suivez le chemin dijit -> from -> DateTextBox, vous obtenez des bouts de codes et des indications.

Par exemple, vous devez préciser cette instruction en début de fichier js :

Code :

dojo.require("dijit.form.DateTextBox");

Ce qui vous permettra d'utiliser ce composant. Et pour créer l'élément, c'est cette syntaxe-ci :

Code :

var foo = new dijit.form.DateTextBox(/* Object */ args);

Ils vous donnent un exemple :

Code :

new dijit.form.DateTextBox({value: new Date(2009, 0, 20)})

Qui correspond à :

Code html :

<input dojotype='dijit.form.DateTextBox' value='2009-01-20'>

[Dendrite]

Merci Vermine,
J'essaie d'appliquer, mais je dois encore rater des choses :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
			/**************************************
			BLOC DEBUT
			**************************************/
			labDebut.setAttribute('for','myDate');
 
			//firefox
			labDebut.setAttribute("class","champF");
			//IE
			labDebut.setAttribute("className","champF");
			labDebut.innerHTML='Début';
 
			var debut=new dijit.form.DateTextBox({
				value: new Date(2011,6,29),
				id: 'debut_'+num
			})
 
			divPhases.appendChild(labDebut);
			divPhases.appendChild(debut);
			divPhases.appendChild(br3);

[Daniel_Gibot]

Bonjour et bienvenue,

Avez-vous un message d'erreur lorsque ce script est exécuté ?
Avez vous ajouté le parseOnLoad lors du chargement de la bibliothèque dojo ?

[Dendrite]

Bonjour,

Cette fois, cela fonctionne, en ajoutant le second paramètre (du noeud).
Mais le problème, c'est que je veux d'abord faire le appendChild du label, puis du champ date (debut) puis du saut de ligne.

Je sais, tout ça n'est pas élégant...

Avec le code ci-dessous, il zappe le label... et j'ai enfin mon champ date, mais en premier dans le divPhases, alors que je le voulais en second...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
			/**************************************
			BLOC DEBUT
			**************************************/
			labDebut.setAttribute('for','debut_'+num);
 
			//firefox
			labDebut.setAttribute("class","champF");
			//IE
			labDebut.setAttribute("className","champF");
			labDebut.innerHTML='Début';
			divPhases.appendChild(labDebut);
 
			dojo.require("dijit.form.DateTextBox");
			var debut=new dijit.form.DateTextBox({
				value: new Date(2011,6,29),
				id: 'debut_'+num
			},divPhases);
			divPhases.appendChild(br3);

[Dendrite]

Envoyé par Daniel_Gibot

Bonjour et bienvenue,
Avez vous ajouté le parseOnLoad lors du chargement de la bibliothèque dojo ?

Voici ce qui concerne dojo dans la balise head.

Code :

1
2
3
4
5
6
7
8
9
10
		<!-- DOJO-->
		<link rel="stylesheet" type="text/css" href="../js/dijit/themes/claro/claro.css"/>
         <script type="text/javascript" src="../js/dojo/dojo.js" djConfig="parseOnLoad: true">
			dojo.require("dijit.form.DateTextBox");
        </script>
        <style type="text/css">
            .claro table.dijitCalendarContainer { margin: 25px auto; } #formatted
            { text-align: center; }
        </style>
		<!-- FIN DOJO-->

[Daniel_Gibot]

Avec le code ci-dessous, il zappe le label... et j'ai enfin mon champ date, mais en premier dans le divPhases, alors que je le voulais en second...

Et en creant un bloc div qui contient les div dans lesquels positionner vos champs ?

La règle des objets Dojo c'est "un objet html pour un objet dojo".
Donc avec un div principal qui contient un div pour labDebut, un div pour la dateBox et un div pour br3 ça devrait passer...


PS : En rajoutant

Code :

isDebug:true

après

Code :

parseOnload:true,isDebug:true

vous aurez un debugger pour tout ce qui est conflit d'id ou absence d'objet pour IE

[Dendrite]

Bien, on dirait enfin que la syntaxe suivante fonctionne, grâce à vos conseils, merci bien :
J'ai choisi de créer un objet HTML input, dans lequel j'affecte l'objet Dojo.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
			/**************************************
			BLOC DEBUT
			**************************************/
			labDebut.setAttribute('for','debut_'+num);
 
			//firefox
			labDebut.setAttribute("class","champF");
			//IE
			labDebut.setAttribute("className","champF");
			labDebut.innerHTML='Début';
			divPhases.appendChild(labDebut);
			var inputDebut=document.createElement('input');
			divPhases.appendChild(inputDebut);
 
			dojo.require("dijit.form.DateTextBox");
			var debut=new dijit.form.DateTextBox({
				id: 'debut_'+num
			},inputDebut);
 
 
			divPhases.appendChild(br3);

J'ai maintenant le problème suivant, tout aussi important.

Quand on change le nombre de phases dans le select initial, je lance la fonction lanceBlocPhases() qui convoque dans une boucle la fonction lancePhase(numPhase,totalPhases)

Elle doit donc d'abord tout réinitialiser, tout le divPhases.
Si je fais
divPhases.innerHTML='';
Cela fonctionne, sauf pour les objets dojo.
Comment élimine-t-on des objets dojo créés dynamiquement ?

[Daniel_Gibot]

Pour éliminer mes objets dojo, j'utilise :

Code :

dijit.byid('monObjetDojo').destroyRecursive(true);

Ca fonctionne ainsi donc je n'ai pas cherche si c'était le plus correct
Par contre, pour la valeur true ou false, je n'ai pas vu de différences.

[Dendrite]

Mais l'id de l'objet dojo étant construit avec concaténation de variable, je ne sais pas d'avance si je dois détruire debut_1, debut_2, debut_10 etc...
Ne peut on détruire tous les objets dojo par le type dateTextBox par exemple ?

[Daniel_Gibot]

Si vous detruisez tous les objets de type DateTextBox inutile de savoir son id.
Vous connaissez la base de l'id -- > "debut_"
Il suffit de faire une boucle jusqu'à ce que l'id n'existe plus.

Code :

1
2
3
4
5
6
7
8
9
 
existe = true;
for(var i=0; existe == true;i++){
     if(typeof(dijit.byId("debut_"+i)) != "undefined" && dijit.byId("debut_"+i) !== null){
          dijit.byId("debut_"+i).destroyRecursive(true);
     } else {
          existe = false;
     }
}

[Dendrite]

J'ai beau manipuler cette boucle de destruction, cela fait tout bugger.

Code :

Si vous detruisez tous les objets de type DateTextBox

Il n'existe aucune méthode pour cela ?

[Daniel_Gibot]

Il existe bien un moyen de "scanner" les DateTextBox de la page mais cela revient a faire une boucle encore plus complexe que ce que je vous ai fourni.
Avez vous essaye en mettant false ?

Y a t'il un message d'erreur ?

[Dendrite]

Envoyé par Daniel_Gibot

Avez vous essaye en mettant false ?

Y a t'il un message d'erreur ?

En mettant false, j'ai ce message d'erreur :

Code :

throw new Error("Tried to register widget with id=="+_1.id+" but that id is already registered");

[Daniel_Gibot]

Bonjour,

J'ai testé un système d'ajout/suppression de DateTextBox, histoire de me faire une meilleure idée de ce que vous souhaitez réaliser.
J'ai donc pu modifier la fonction de suppression que je vous avais fournie.

Le numText correspond à l'incrémentation de l'id des DateTextBox.
Le destroyRecursive n'était pas la bonne méthode pour supprimer l'objet mais le destroy tout simplement.

Code :

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
 
//fonction de création de DateTextBox
function creerForm(num){
	var inputDebut=document.createElement('input');
	var br=document.createElement('br');
	divPhases.appendChild(br);
	divPhases.appendChild(inputDebut);
	var debut=new dijit.form.DateTextBox({
		id: 'debut_'+num
	},inputDebut);
        //on incremente la variable des ids
	num = parseInt(dijit.byId("numText").get("value")) + 1;
	dijit.byId("numText").set("value",num);
}
//fonction de suppression de tous les ids "debut_"
function supprimer(){
        //initialisation des variables
	var existe = true;
	var i = 1;
	while (existe == true){
                //controle de l'existence
		if(typeof(dijit.byId("debut_"+i)) != "undefined" && dijit.byId("debut_"+i) !== null){
                  //suppression
		  dijit.byId("debut_"+i).destroy(false);
		} else {
		  existe = false;
		}
                //on incremente
		i++;
	}
        //remise à 1 de la variable d'incrementation des id
	dijit.byId("numText").set("value",1);
}

Au cas où vous ne l'auriez pas trouvée, voici l'url de l'api de dojo incluant plusieurs versions : API Dojo

[Dendrite]

Là, je suis un peu en vacances.
Mais dès que je rentre, je regarde tout ça, et dans tous les cas, un grand merci d'avance. Je vous tiens au courant à la reprise, à la miaou.

[Dendrite]

Bonjour.
Malheureusement, j'ai le code erreur suivant (voir ligne 8 du premier extrait), et j'avoue que je ne sais pas pourquoi. Pendant la création dynamique des calendriers debut, j'ai bien ajouté les lignes de code d'attribution d'id que vous suggérez...
Mais j'ai sûrement encore raté des choses.

Code :

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
 
        function supprCalDojo(){
            var existe = true;
            var i = 1;
            while (existe == true){
                if(typeof(dijit.byId("debut_"+i)) != "undefined" && dijit.byId("debut_"+i) !== null){
 
redac.php:56Uncaught TypeError: Object #<Object> has no method 'byId'
 
 
                    dijit.byId("debut_"+i).destroy(false);
                }
                else {
                    existe = false;
                }
                i++;
            }
            dijit.byId("numText").set("value",1);
        }
        function lanceBlocPhases(){
            //a chaque refresh, il faut tout vider
            var divPhases=document.getElementById('mesPhases');
 
            supprCalDojo();
            divPhases.innerHTML='';
 
            //puis lancer la fonction lancePhase en boucle si l'on a une valeur à nb de phases
            var nbPhases=document.getElementById("nb_phases");
            total=parseInt(nbPhases.value);
            if(total>0){
                for(var i=1;i<=total;i++){
                    lancePhase(i,total);
                }
            }
        }

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
		function lanceBlocPhases(){
			//a chaque refresh, il faut tout vider
			var divPhases=document.getElementById('mesPhases');
 
			supprCalDojo();
			divPhases.innerHTML='';
 
			//puis lancer la fonction lancePhase en boucle si l'on a une valeur à nb de phases
			var nbPhases=document.getElementById("nb_phases");
			total=parseInt(nbPhases.value);
			if(total>0){
				for(var i=1;i<=total;i++){
					lancePhase(i,total);
				}
			}
		}

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
			/**************************************
			BLOC DEBUT
			**************************************/
			labDebut.setAttribute('for','debut_'+num);
 
			//firefox
			labDebut.setAttribute("class","champF");
			//IE
			labDebut.setAttribute("className","champF");
			labDebut.innerHTML='Début';
			divPhases.appendChild(labDebut);
			var inputDebut=document.createElement('input');
			divPhases.appendChild(inputDebut);
 
			dojo.require("dijit.form.DateTextBox");
			var debut=new dijit.form.DateTextBox({
				id: 'debut_'+num,
				name: 'debut_'+num
			},inputDebut);
			num = parseInt(dijit.byId("numText").get("value")) + 1;
			dijit.byId("numText").set("value",num);
 
			divPhases.appendChild(br3);

[Daniel_Gibot]

Bonjour,

Si le dijit.byId n'est pas connu c'est que soit le parse n'est pas fait soit le dijit n'est pas créé dans la fonction.
Est ce que vous récupérez bien la variable "num" ?
Si ce n'est pas le cas, faite :

Code :

1
2
3
4
5
6
 
/**************************************
BLOC DEBUT
**************************************/
num = parseInt(dijit.byId("numText").get("value"));
labDebut.setAttribute('for','debut_'+num);

sinon pour parser :
A ajouter dans la fonction de création à la fin :

Code :

1
2
3
4
...
divPhases.appendChild(br3);
dojo.parser.parse("menu_"+num)

[Dendrite]

Finalement, c'est ce code qui fonctionne, merci Daniel.
J'ai supprimé la dernière ligne de votre fonction, rectifié 2 bugs de mon code que vous ne pouviez pas voir, et tout tourne bien.
Encore merci pour votre dévouement.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
       function supprCalDojo(){
            var existe = true;
            var i = 1;
            while (existe == true){
                if(typeof(dijit.byId("debut_"+i)) != "undefined" && dijit.byId("debut_"+i) !== null){
					console.log('Suppression cals ',i);
                    dijit.byId("debut_"+i).destroy(false);
					dijit.byId("fin_"+i).destroy(false);
                }
                else {
                    existe = false;
                }
                i++;
            }
        }