Discussion :

[Daniel_Gibot]

Bonjour !

Je me lance dans le drag and drop façon Dojo et je trouve ça bien pratique. Mais il me reste un petit soucis que je n'arrive pas à résoudre.
Mon container Source se remplit en fonction de la valeur sélectionnée dans un filteringSelect. Jusque là aucun soucis, la liste s'affiche bien et le dnd se fait. Par contre, je dois faire en sorte que l'on puisse modifier la valeur du filteringSelect et ainsi modifier la liste des éléments déplaçables. Et c'est là que je bloque. La liste se met à jour mais dès que je veux déplacer un élément j'ai une erreur javascript.

Code :

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

1
2
 
Erreur : 'getItem(...),type' a la valeur Null ou n'est pas un objet.

J'explique ma façon de faire. Au onChange du filteringSelect, je lance une fonction qui va récupérer la liste via php et au retour de cette liste (dans le callback du xhrPost) je fais :

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
 
//Suppression de la liste des modules (Source)
lModule.clearItems();
 
//Suppression des modules choisis (Target)
ajoutModule.clearItems();
 
//On detruit le dnd Source
lModule.destroy();
 
//On ajoute la nouvelle liste
dojo.byId('lModule').innerHTML = data;
 
//on crée un nouveau dnd 
source = new dojo.dnd.Source("lModule");

Avez-vous une méthode plus pratique et plus fonctionnelle ?

Merci d'avance pour vos réponses !

[Daniel_Gibot]

J'ai trouvé un moyen détourné de faire ce que je veux.

Au lieu de créer le dnd source dans mon javascript, je crée le code html coté serveur. Ce code je l'implante (innerHTML) dans un bloc div que je parse.
L'ancien source est écrasé et je peux donc faire mes dnd sans soucis.
Ca marche nickel

PS : Mais si par hasard vous connaissez la méthode pour rafraichir en javascript je suis preneur

[vermine]

Au lieu de créer le dnd source dans mon javascript, je crée le code html coté serveur. Ce code je l'implante (innerHTML) dans un bloc div que je parse.

Salut, salut,

Tu veux dire que tu n'utilise pas DOM pour créer ton HTML ?
Qu'entends-tu par "un bloc div que je parse" ?

[Daniel_Gibot]

A l'évènement onChange de mon filteringSelect, j'envoie mon Id côté serveur qui fait une recherche (requete SQL).
Ensuite, je traite le résultat en le formatant dans des balises <ul><lil></li></ul> contenant également le dojoType et le dndType.
Ce résultat est renvoyé à ma fonction javascript et est inséré dans le bloc div(monDiv.innerHTML).
Ce div est en fait un layout.contentPane (pour avoir les barres de défilement).
Après l'insertion de mon nouveau code html généré, je fais un dojo.parser.parse("monDiv") afin de prendre en compte le code dojo de mon contenu html. C'est l'équivalent du parseOnLoad sauf que c'est pas onLoad ^^

Code HTML au chargement de la page :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<center><b>Liste des modules</b></center>
<div dojoType='dijit.layout.ContentPane' class='thumb' id='divlModule' style='height:100px;width:300px;'>	
	<!-- dnd source ici -->					
</div>
<center><b>Modules sélectionnés</b></center>
<div dojoType='dijit.layout.ContentPane' class='thumb' id='divajoutModule' style='height:100px;width:300px;'>	
	<ul dojoType='dojo.dnd.Source' jsId='ajoutModule' id='ajoutModule' accept='MOD' style='width:100%;height:80%;' class='container'>
	</ul>
</div>

Code côté serveur :

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
 
.
.
.
$i = 0;
//on ouvre la balise <ul>
$result = "<ul dojoType='dojo.dnd.Source' jsId='lModule' id='lModule' accept='MOD' style='width:100%;height:80%;' class='container'>";
$allItems = array();
foreach($ligne as $element){
        //on cree une balise <li> par ligne retournée par la requete sql
	$result .= '<li class="dojoDndItem" dndType="MOD">'.utf8_encode(html_entity_decode($ligne[$i]->ModApp, ENT_QUOTES)).'</li>';
	$i++;
}
//on ferme la balise <ul>
$result .= "</ul>";
 
//on retourne la variable contenant le dnd source généré
print $result;

Code au retour de la donnée côté serveur (situé au callback d'un xhrPost) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.
.
.	
//on vide le contenu du dnd des modules sélectionnés
ajoutModule.clearItems();
dojo.byId('ajoutModule').innerHTML = "";
 
//on insère la nouvelle liste
dojo.byId('divlModule').innerHTML = data;
 
//on parse afin d'activer le drag n drop
dojo.parser.parse("divlModule");

[vermine]

Du parsing Dojo, okay, je me réveille.

[Daniel_Gibot]

C'est une alternative et je pense qu'il y a une solution plus "dojo" mais je le passe à résolu.