[Ajax] Super les drags drops mais comment sauvegarder ?

Version imprimable

20/04/2006, 16h45
killprog

[Ajax] Super les drags drops mais comment sauvegarder ?

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.
20/04/2006, 17h01
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 ...
20/04/2006, 17h22
denisC

Citation:

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)...
20/04/2006, 18h02
killprog

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.
20/04/2006, 21h01
SpaceFrog

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

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:

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:

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.

Code:

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

21/04/2006, 10h06
denisC

Citation:

Envoyé par SpaceFrog

<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">
??

Les types Mimes, faut faire attention à la casse!!
21/04/2006, 19h46
killprog

Bonjour,

Modifié mais sa ne change rien !

Citation:

Code :

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

??

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.
24/04/2006, 08h35
denisC

Citation:

Envoyé par killprog

Modifié mais sa ne change rien !

Auh, tu ne m'as pas mis mes j minuscules....
24/04/2006, 17h13
killprog

Bonjour,

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

Cordialement.
04/05/2006, 14h37
killprog

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.

Au début de votre source, vous créez les valeurs pour les cookies avec
Citation:
Envoyé par killprog
Code:

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
Citation:
Envoyé par killprog
Code:

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ù

Citation:

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:

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>

04/05/2006, 17h09
killprog

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.