Créer un div contenant des widgets Dojo

Version imprimable

Bonjour,
Voilà mon problème : J'ai un div initial qui va contenir des widgets Dojo (essentiellement des éléments de formulaire => TextBox, DateTextBox ...), et j'aimerai pouvoir dupliquer exactement le Div contenant tout ceci (et bien entendu que les éléments en dojo, le restent).

J'ai bien essayé de bidouiller quelque chose avec les fonction dojo.create() et dojo.clone() mais sans succès...

Mon bout d'essai :

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
function createDiv(){
        var monDiv = dijit.byId("test");
 
        dojo.create("div", {
            innerHTML: monDiv,
            id: "div1_1", 
            className: 'maClasse',
            style: {
                height : "500px", 
                width: "80%", 
                backgroundColor : "red"}
        }, "divMain");
    }
 
<s:form data-dojo-type="dijit.form.Form" 
            data-dojo-props="method: 'post',
            action: 'monAction'"
            theme="simple">
        <script type="dojo/method" event="onSubmit">
            if(!this.validate()) {
            return false;
            }
            return true;
        </script>
        <s:div id="test">
             // Mes widgets Dojo ...
        </s:div>
</s:form>

Ma partie "innerHTML" me génère un beau : "undefined"

Quelqu'un aurait il une idée svp ?

Merci d'avance

17/11/2011, 10h21
cfried

Essaie avec monDiv.domNode mais je ne comprends pas trop ta problématique.
17/11/2011, 10h35
VinceCBA

Je vais essayer d'être le plus clair possible.
Je vais prendre par exemple le cas ou je veux ajouter plusieurs clients d'un coup.

J'appuie sur le bouton "ajouter un client", et j'ai un petit formulaire (contenant des widgets Dojo) qui doit s'afficher en dessous (sans jamais changer ni rafraichir la page).
Si je reclique sur ce meme bouton, un nouveau formulaire doit venir se placer en dessous du 1er, etc ...

Tu vois un peu plus de quoi il s'agit ?

PS :

Citation:

Envoyé par cfried

Essaie avec monDiv.domNode mais je ne comprends pas trop ta problématique.

Tu pourrais m'expliquer a quoi ca sert stp ? Merci :)
17/11/2011, 11h56
Daniel_Gibot

Bonjour,

Je pense qu'en allant voir les péripéties que se sont déroulées ICI Vous devriez trouver votre bonheur ;)
17/11/2011, 13h57
VinceCBA

Merci de ta réponse Daniel, malheureusement je n'ai pas trouvé mon bonheur dans ton lien :(

Ok alors je comprends mieux ton problème.

A mon avis tu devrais modifier ta fonction de création de div pour qu'elle prenne un noeud "cible" en paramètre.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var createDiv = function(node) { dojo.create("div", { innerHTML : "<div> test </div>", id : "div1_1", // je ne mettrai pas d'id manuellement perso car ça va s'écrasouiller tout ça ^^ className : 'maClasse', style : { height : "500px", width : "80%", backgroundColor : "red" } }, node, "after"); }; var btnAdd = new dijit.form.Button({ label : "monBouton", onClick : function() { createDiv(dojo.query('.maClasse:last-of-type').domNode); } });
Bon j'ai pas testé ce code et je ne suis pas sûr que l'on puisse sortir le domNode directement du dojo.query ... il faudrait adapter mais je voulais te donner le principe.

Ensuite dans ton innerHTML tu peux mettre ce que tu veux mais si tu mets des markups Dojo je pense qu'il faut le parser manuellement.

Si tu as d'autres questions n'hésites pas ...

17/11/2011, 16h16
VinceCBA

Citation:

Envoyé par cfried

Ok alors je comprends mieux ton problème.

A mon avis tu devrais modifier ta fonction de création de div pour qu'elle prenne un noeud "cible" en paramètre.

Hummm ... je défini déja un noeud cible dans ma fonction (=> "divMain")
17/11/2011, 16h25
cfried

Citation:

Envoyé par VinceCBA

Hummm ... je défini déja un noeud cible dans ma fonction (=> "divMain")

Oui mais cette cible est fixe dans ton cas si je ne me trompe ? Ce que tu cherches à faire c'est finalement de décaler la cible au fur et à mesure des ajouts non ? !
17/11/2011, 16h41
Daniel_Gibot

Ce que vous souhaitez faire c'est créer autant que vous le voulez des formulaires. Dans l'exemple que je vous ai fourni c'est le même cas sauf que ce n'est pas un formulaire mais juste une dateTextBox. Mais au final c'est la même chose car le but c'est de dupliquer un objet dojo.
Pour y arriver c'est très simple. Il faut que l'identifiant (id) ne soit pas fixe.
Le seul moyen c'est de définir une variable globale contenant un compteur.
Comme vous avez déjà le script de création de votre bloc div il suffit juste d'incrémenter le compteur à chaque clic et de l'insérer dans l'identifiant du bloc div à créer et de créer programmatiquement vos widgets dojo dans votre div.
21/11/2011, 10h01
VinceCBA

Citation:

Envoyé par Daniel_Gibot

Comme vous avez déjà le script de création de votre bloc div

Justement, le problème est que je ne l'ai pas ...
Apres, si vous parlez de votre script "creerForm(num)", ayant beaucoup d'éléments (HTML notamment) à créer, du type "div, table, td ....", je peur le fait que de tout créer avec des "createElement" ne sera vraiment pas pratique, voir très laborieux ...

C'est pour ca que j'aurais aimé pouvoir directement creer mon div (contentant tous mes "objets" HTML et Dojo) et le dupliquer en utilisant un "byId()" par ex ...

Je suis débutant sur Dojo, donc je galère encore un peu :oops:
22/11/2011, 13h51
Daniel_Gibot
Bonjour,

Essayez ceci :
Code:

1 2 3 4 5 6 function test(){ var node = dojo.byId("test"); var newnode = dojo.clone(node); dojo.attr(newnode, "id", "test2"); dojo.place(newnode, dojo.body()); }
Ça permet de cloner un nœud avec les éléments qu'il contient. Le hic c'est que les ID ne changent pas.
22/11/2011, 14h36
VinceCBA

Citation:

Envoyé par Daniel_Gibot

Le hic c'est que les ID ne changent pas.

Bonjour,
Effectivement, c'est un des problèmes majeurs que je rencontre
22/11/2011, 14h43
Daniel_Gibot

Ca doit être possible de les modifier car lors du clonage c'est un objet que l'on obtient. Reste a trouver le chemin pour modifier les Id.

Bonjour, quelle est l'utilité de mettre des identifiants dans votre cas ?

Pourquoi ne pas créer une contentPane programmatiquement, en précisant une page href qui sera chargée pour peupler le contentPane avec à l'intérieur du code html déclaratif.
Code:

1 2 3 4 5 6 7 8 var cpNewVideo = new dijit.layout.ContentPane({ title : "Nouvelle vidéo", href : "newVideo.php", style:'width:450px;', preload : true, parseOnLoad : true } });
Et dans newVideo.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 <form method="post" action="UpVideo.php" id="myForm" enctype="multipart/form-data" > <fieldset> <legend> Déposez votre vidéo </legend> <input data-dojo-type="dojox.form.Uploader" data-dojo-props="multiple:false,title:'envoi de fichier vidéo',showInput:'before',label:'Parcourir ...',class:'browseButton',name:'uploadedfile'" name="uploadedfile" data-dojo-id="uploaderVideo" id="uploaderVideo"/> <input type="button" id="remBtnVideo" data-dojo-props='label:"Reset"' data-dojo-id="remBtnVideo" data-dojo-type="dijit.form.Button" /> <input type="submit" data-dojo-props="label:'Add'" data-dojo-type="dijit.form.Button" /> </fieldset> </form> <div id="resUpVideo"></div>
Ce n'est qu'un exemple.

Après pour effectuer des actions sur les éléments chargés dynamiquement, il y a toujours la possibilité de leur ajouter un tag class et se servir de dojo.query combiné avec la boucle forEach.

Redis nous ce que tu comptes faire, à bientôt