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

[Ajax] Super les drags drops mais comment sauvegarder ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager