Discussion :

[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 :

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

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 :

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

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

Ils vous donnent un exemple :

Code :

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

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

Qui correspond à :

Code html :

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

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

[Dendrite]

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

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
			/**************************************
			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 :

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
			/**************************************
			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]

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 :

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

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 :

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

isDebug:true

après

Code :

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

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 :

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
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 :

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

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 :

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

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 :

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

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]

Avez vous essaye en mettant false ?

Y a t'il un message d'erreur ?

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

Code :

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

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 :

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
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 :

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
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 :

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
		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 :

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
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 :

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

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 :

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

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 :

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

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++;
            }
        }