[Ajax] Super les drags drops mais comment sauvegarder ?

**killprog** · 20/04/2006, 16h45

Bonjour,

J'hésite encore un peu sur le framework que je vais utiliser mais je pense bien me tourner plus particulièrement vers scriptaculous combiné avec openrico au lieu d'utiliser yahoo.

Donc j'ai créé mais zones de drops et sa fonctionne mais des que je rafraichi la page, tous reviens dans l'ordre initial ! Comprenez moi bien que les personnes qui vont utiliser mon site ne vont pas s'embeter à tous remetres à chaque fois... donc voila, ma question est comment sauvegarder l'ordre ? En faite tout simplement pour que quand on réactualise, sela reste dans l'état.

Merci.

**SpaceFrog** · 20/04/2006, 17h01

pas en javascript ... ou alors avec des cookies
sinon il te faudra une BD sur ton serveur avec id du loggué et sauvegarde de ses positions ...

**denisC** · 20/04/2006, 17h22

Envoyé par SpaceFrog

pas en javascript ... ou alors avec des cookies
sinon il te faudra une BD sur ton serveur avec id du loggué et sauvegarde de ses positions ...

Au vus de Google home (http://www.google.com/ig?hl=en) je dirais cookie. Mais sur le comment, je ne suis pas sur que ça existe en scriptaculous, et la page Google a l'air incomprehensible (comme d'habitude)...

**killprog** · 20/04/2006, 18h02

Bonjour,

Je pense que la meilleur methode est les cookies car ainsi pas besoin de se loguer ! Mais voila, comment mettre sa en place ?

Je pense qu'il faudrait modifier le fichier drap drop mais voila, pour tout dire, c'est un peu du charabia pour moi n'étant pas expérimenté dans le javascript (je l'ai toujours laissé de coté mais voila qu'aujourd'hui, j'en est vraiment besoin !).

Sinon, c'est vraiment bizarre que cette fonction ne soit pas présente alors que tous les portails utilisant le drap and drop sauvegarde...

Cordialement.

**SpaceFrog** · 20/04/2006, 21h01

heu s'il te plait ... les drap c'est pour le lit ...
c'est drag and drop de l'anglais trainer et relacher (laisser tomber)...

sur le principe il faudra sauvegarder les position des opbjets dans le cookie puis sur le onload vérifier si le cookie existe et si oui récuoérer les positions des objets ...
en pièce joint un vieux fichier texte avec ce qu'il faut pour les cookies ...

**killprog** · 20/04/2006, 21h22

Bonjour,

Merci spacefrog mais j'avais déjà ces fonctions... toutefois elles étaient un petit peu différentent; je l'ai est donc remplacées par les tiennes.

Donc j'ai essayé mais voila comme toujours javascript me met des erreurs ! Et pourtant je suis sûr de moi !

Voici mon 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
<html>
<head>
<title>P0rt4!1</title>
<script language="Javascript" type="text/javascript" src="lib/prototype.js"></script>
<script language="Javascript" type="text/javascript" src="src/scriptaculous.js"></script>
<script language="Javascript" type="text/javascript" src="fonctions.js"></script>
<script language="Javascript" type="text/javaScript">
setcookie("element_liste1","vide");
setcookie("element_liste2","vide");
setcookie("element_liste3","vide");
</script>
</head>
<body>
<table style="width:100%; height:100%;"><tr>
<td style="width:33%;"><div id="liste1" style="width:100%; height:100%; background-color:blue;">
 <div id="dem_11" name="11" style="width:100%; height:50px; background-color:pink;">a</div>
 <div id="dem_12" name="12" style="width:100%; height:50px; background-color:pink;">a</div>
 <div id="dem_13" name="13" style="width:100%; height:50px; background-color:pink;">a</div>
 <div id="dem_14" name="14" style="width:100%; height:50px; background-color:pink;">a</div>
</div></td>
<td style="width:33%;"><div id="liste2" style="width:100%; height:100%; background-color:red;">
 <div id="dem_21" style="width:100%; height:50px; background-color:pink;">a</div>
 <div id="dem_22" style="width:100%; height:50px; background-color:pink;">a</div>
 <div id="dem_23" style="width:100%; height:50px; background-color:pink;">a</div>
 <div id="dem_24" style="width:100%; height:50px; background-color:pink;">a</div>
</div></td>
<td style="width:33%;"><div id="liste3" style="width:100%; height:100%; background-color:yellow;">
 <div id="dem_31" style="width:100%; height:50px; background-color:pink;">a</div>
 <div id="dem_32" style="width:100%; height:50px; background-color:pink;">a</div>
</div></td>
</tr></table>
<script language="Javascript" type="text/javascript">
Sortable.create('liste1',{tag:'div',containment:['liste1','liste2','liste3'],
dropOnEmpty:true,constraint:false,
 onChange:function(){
  element_liste1 = Sortable.serialize('liste1');
  setcookie('element_liste1',element_liste1);
 }
});
Sortable.create('liste2',{tag:'div',containment:['liste1','liste2','liste3'],
dropOnEmpty:true,constraint:false,
 onChange:function(){
  element_liste2 = Sortable.serialize('liste2');
  setcookie('element_liste2',element_liste2);
 }
});
Sortable.create('liste3',{tag:'div',containment:['liste1','liste2','liste3'],
dropOnEmpty:true,constraint:false,
 onChange:function(){
  element_liste3 = Sortable.serialize('liste3');
  setcookie('element_liste3',element_liste3);
 }
});
</script>
<a href="#" onClick="alert(getcookie(element_liste1));">Voir liste 1</a>
<a href="#" onClick="alert(getcookie(element_liste2));">Voir liste 2</a>
<a href="#" onClick="alert(getcookie(element_liste3));">Voir liste 3</a>
<body>
</html>

Le fichier fonctions.js contient :

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
function setcookie(nom,valeur){
 if (nom!="") {
  if (valeur!="") {
   document.cookie=nom+"="+escape(valeur);
  }
 }
}
 
function getcookie(nom){
 var arg=nom+"=";
 var alen=arg.length;
 var clen=document.cookie.length;
 var i=0;
 while (i<clen) {
  var j=i+alen;
  if (document.cookie.substring(i,j)==arg) {
   var endstr=document.cookie.indexOf (";",j);
   if (endstr==-1) {endstr=clen;}
   return unescape(document.cookie.substring(j, endstr));
            }
  i=document.cookie.indexOf(" ",i)+1;
        if (i==0) {break;}
  }
 return null;
}

Et les autres fichiers inclus sont issus de scriptaculous version 1.6.

Donc les différents problèmes sont que j'ai déclaré trois cookies au début et quand je les appels on me dit qu'ils ne sont pas définis...

Ensuite quand l'on déplace un div, normalement, le nouvelle ordre devrait etre entré dans le cookie mais à la place j'obtiens undefined ou null.

Je comprend vraiment pas pourquoi.

Cordialement.

Note : Désolé pour le drap ! Je voulais dire Drag à chaque fois.

**SpaceFrog** · 21/04/2006, 09h46

Code :

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

1
2
3
4
<script type="text/Javascript" src="lib/prototype.js"></script>
<script type="text/Javascript" src="src/scriptaculous.js"></script>
<script type="text/Javascript" src="fonctions.js"></script>
<script type="text/JavaScript">

??

**denisC** · 21/04/2006, 10h06

Envoyé par SpaceFrog

Les types Mimes, faut faire attention à la casse!!

**killprog** · 21/04/2006, 19h46

Bonjour,

Modifié mais sa ne change rien !

Code :

??

Les fichiers prototype et scriptaculous sont issus de la dernière version de scriptaculous et le fichier fonctions.js est a moi ! Je vous est mis son contenu.

Cordialement.

**denisC** · 24/04/2006, 08h35

Envoyé par killprog

Modifié mais sa ne change rien !

Auh, tu ne m'as pas mis mes j minuscules....

**killprog** · 24/04/2006, 17h13

Bonjour,

Si mais sur mes scripts... pas sur la forum... je vais modifier sa tout de suite !

Cordialement.

**killprog** · 04/05/2006, 14h37

Bonjour,

Toujours pas d'idée ? Je suis vraiment bloqué ! Le javascript, je trouve sa vraiment médiocre... vive PHP ! lol Non, c'est juste pour dire que javascript ne fonctionne pas comme il devrait ! Il me sort a chaque fois des choses bizarre : je sais pas si vous avez vu mes autres messages ? Des div qui se ferme tout seul, des incoérences...

Si vous plait, pouvez vous tester ce que j'ai fait et me dire ce qui ne vas pas ! Si vous trouvez pas, dites le !

Cordialement.

**lysandro** · 04/05/2006, 15h16

Au début de votre source, vous créez les valeurs pour les cookies avec

Envoyé par killprog

Code :

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

1
2
3
4
5
<script language="Javascript" type="text/javaScript">
setcookie("element_liste1","vide");
setcookie("element_liste2","vide");
setcookie("element_liste3","vide");
</script>

Mais à la fin voous les interrogez avec

Envoyé par killprog

Code :

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

1
2
3
4
5
6
 
<a href="#" onClick="alert(getcookie(element_liste1));">Voir liste 1</a>
<a href="#" onClick="alert(getcookie(element_liste2));">Voir liste 2</a>
<a href="#" onClick="alert(getcookie(element_liste3));">Voir liste 3</a>
<body>
</html>

Or les variables: element_listeN ne sont pas définies, d'où

Envoyé par killprog

Donc les différents problèmes sont que j'ai déclaré trois cookies au début et quand je les appels on me dit qu'ils ne sont pas définis...

Si vous remplacez les variables par des chaînes de caractères, ce problème devrait être résolu (corrections en rouge)

Code :

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

1
2
3
4
5
6
<a href="#" onClick="alert(getcookie('element_liste1'));">Voir liste 1</a>
<a href="#" onClick="alert(getcookie('element_liste2'));">Voir liste 2</a>
<a href="#" onClick="alert(getcookie('element_liste3'));">Voir liste 3</a>
</body>
</html>

**killprog** · 04/05/2006, 17h09

Bonjour,

Ha ! Je vous remercie vraiment beaucoup.

C'est le détail qui mais passer au dessus ! Donc en faite, au lieu de prendre sa pour une chaine, il me prenait sa pour une variable ! lol

Je pense que maintenant, je vais réussir à faire ce que je souhaitai !

Merci.

[Ajax] Super les drags drops mais comment sauvegarder ?

JavaScript

Discussions similaires

Partager

Partager