Discussion :

[sd]

Bonjour à toutes et a tous,

Je découvre le merveilleux monde de l'ajax, toutes ses librairies fort sympathique.

Je suis tombé sur DojoToolKit, je me suis amusé à faire 3 conteneurs avec des éléments (div), l'ajax marche très bien, mes éléments sont drag-and-drop...
Mon "soucis" est que je voudrais récupérer ses valeurs pour les inscrire dans une bd.
J'essaie tout simplement, pour commencer, d'afficher les valeurs dans un alert javascript en utilisant dojo.dnd.Container.getItem("mon_id") (vu depuis la doc dojo)

Voici le code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<script type="text/javascript">
  dojo.require("dojo.dnd.Container");
  dojo.require("dojo.dnd.Manager");
  dojo.require("dojo.dnd.Source");
 
  function initDND(){
    var c1;
    c1 = new dojo.dnd.Source("container1");
    c1.insertNodes(false, [1, "A", [1, 2, 3],
      function(x){ return x + x; },
      {toString: function(){ return "CUSTOM!"; }},
      null]);
 
    // example subscribe to events
    dojo.subscribe("/dnd/start", function(source){
      console.debug("Starting the drop", source);
    });
    dojo.subscribe("/dnd/drop/before", function(source, nodes, copy, target){
      if(target == c1){
        console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
      }
    });
    dojo.subscribe("/dnd/drop", function(source, nodes, copy, target){
      if(target == c1){
        console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
      }
    });
    dojo.connect(c4, "onDndDrop", function(source, nodes, copy, target){
      if(target == c4){
        console.debug(copy ? "Copying from" : "Moving from", source);
      }
    });
  };
 
  dojo.addOnLoad(initDND);
</script>
 
<div id="dragLists">
  <div style="margin: 5px; float: left;">
  <h3>rub1</h3>
    <div class="dndContainer dojoDndContainer dojoDndSource dojoDndTarget" jsid="rub_1" id="rub_1" dojotype="dojo.dnd.Source">
      <div class="dojoDndItem" id="srub_1" jsid="srub_1">rub1_1</div>
      <div class="dojoDndItem" id="srub_2" jsid="srub_2">rub1_2</div>
    </div>
  </div>
  <div style="margin: 5px; float: left;">
    <h3>rub1</h3>
    <div class="dndContainer dojoDndContainer dojoDndSource dojoDndTarget" jsid="rub_3" id="rub_1" dojotype="dojo.dnd.Source">
      <div class="dojoDndItem" id="srub_1" jsid="srub_1">rub2_1</div>
      <div class="dojoDndItem" id="srub_2" jsid="srub_2">rub2_2</div>
    </div>
  </div>
  <div style="margin: 5px; float: left;">
    <h3>rub1</h3>
    <div class="dndContainer dojoDndContainer dojoDndSource dojoDndTarget" jsid="rub_3" id="rub_1" dojotype="dojo.dnd.Source">
      <div class="dojoDndItem" id="srub_1" jsid="srub_1">rub3_1</div>
      <div class="dojoDndItem" id="srub_2" jsid="srub_2">rub3_2</div>
    </div>
  </div>
</div>
<a href="#" onClick="alert(dojo.dnd.rub_1.getItem(srub_1))">test</a>

ps: le code ci-dessus est le code de démo de dojo, j'ai juste rajouté un id au div

[emmanuel.remy]

Salut,

Dans le cas des DnD tu perçois des événements que tu peux gérer pour obtenir l'information souhaitée:

• /dnd/drop/before, /dnd/drop etc ... pour les messages "par abonnement"
• onDndDrop etc ... pour les connections de type événement.

Ces modes d'intéractions fournissent un paramètre (nodes) qui contient les noeuds manipulés (droppés dans ton cas). Ainsi tu peux écrire:

Code :

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

1
2
3
4
5
    dojo.subscribe("/dnd/drop/before", function(source, nodes, copy, target){
        //manipulation ici du tableau des nodes, par ex:
        alert(nodes[0].innerHTML);
    });

pour obtenir le contenu du premier noeud droppé.

ERE

[sd]

Salut et merci beaucoup pour cette réponse.

Je comprend maintenant comment récupérer la valeur d'un nœud lors du drop par exemple.

Je me suis donc penché sur mon problème, mais je ne vois pas comment récupérer, lors d'un événement bouton par ex, les valeurs de mon div parent (pour construire par la suite mon update)

Mon but final étant d'updater ma table qui contient toutes les rubriques et sous-rubriques de mon menu.

Si tu as une idée je suis preneur, je viens de voir que dojo avait une console de debug, je vais essayer de m'y intéressé de plus près.

Salutations, sd

[emmanuel.remy]

Au moment de ton update le DnD est terminé. Donc pourquoi n'essaierais tu pas de "découvrir" ta nouvelle structure en parcourant le DOM à partir des noeuds parents (containers ou racine) qui t'intéressent ? tu peux utiliser dojo.query(...) qui te permettra de sélectionner précisément les noeuds.

Qu'est ce que tu en penses ?

ERE

[sd]

Merci encore pour ton implication,

Après quelques recherche, j'ai pu enfin obtenir l'arborescence de mon nœud parent, voici la function qui le permet:

Code :

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

1
2
3
4
 
dojo.query("#monDiv").forEach(function(node, index, arr){
  console.debug(node.innerHTML);
});

Cette fonction boucles sur tous les noeuds de mon parent, et l'affiche dans ma console de debug.

Merci

[emmanuel.remy]

Super !

Juste pour te faciliter la vie, tu peux te passer des 2 derniers paramètres:

Code :

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

1
2
3
4
 
dojo.query("#monDiv").forEach(function(node){
  console.debug(node.innerHTML);
});

Bon courage pour la suite !

ERE

[sd]

Merci encore, je peux maintenant mettre le flag