UI Sortable : mémoriser l'ordre des éléments 'li' après modification

Bonjour,

Actuellement je travail sur cet outil Jquery UI qui me permet de changer l'ordre des valeurs de ma liste 'Sortable'. Mais ma liste viens du Base de donnée et je garde dans la BDD la position de chaque élément.

J'affiche correctement ma liste code HTML généré:

Code:

---

1 2 3 4 5

<ul id="sortable"> <li class="ui-state-default" lipos="1440">Contenus1</li> <li class="ui-state-default" lipos="1441">Contenus2</li> </ul>

---

(j'ai volontairement caché le contenu s'agissant de données propre à une entreprise)

comme vous le voyais j'ai tâté un peu le code fournit dans ce Topic, mais au final je ne cerne pas du tout comment ça fonctionne x).

voici le code JS:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var lipos = null;   function liposUpdade(){ lipos = [];   $("#sortable li").each(function(i,item){ lipos.push($(item).attr("lipos")); });   $("#affiche").append("<p>" + lipos.join(" , ") + "</p>"); } $(function() { $("#sortable").sortable({ placeholder: "ui-state-highlight", update : function (event, ui){ liposUpdade(); } }); $("#sortable").disableSelection(); });

---

bon jusque là ça tourne bien, je peux déplacer mes lignes comme bon me semble, mais comment enregistrer la position final dans la BDD?

Voilà, avec tout ça je pensais pouvoir récupérer la position et la mettre à jour dans ma base de donnée. Malheureusement c'est pas si simple --'.

Est il possible que l'on m'oriente afin que mon programme fonctionne correctement avec l'effet voulu?

J'utilise postgreSQL.

Bonjour,
Tu peux récupérer les valeurs des attributs lipos selon le rang.

Code:

---

1 2 3 4 5

var a = document.getElementById('sortable').getElementsByTagName('li'); for(var i=0;i<a.length;i++) { alert("Lipos "+i+" = "a[i].getAttribute('lipos')); }

---

Tu sérialises ces valeurs puis l'envoyer au serveur avec une requête AJAX.

Donc il me faut utiliser l'Ajax d'accord ;) ,

Le Hic c'est que je n'y connais absolument rien à ce niveau. J'ai beau chercher des tutos ou autre explications, j'en trouve, mais je me retrouve totalement paumé à chaque coup...

c'est possible d'avoir un exemple concret pour la requête Ajax ?

edit: J'ai trouvé ce tutos, mais je ne pense pas que ça corresponde réellement --',

Citation:

---

Tu sérialises ces valeurs puis l'envoyer au serveur avec une requête AJAX.

---

Je ne comprend pas le terme "sérialise"

Re,
Regardes comment utiliser AJAX avec jQuery.

Citation:

---

Je ne comprend pas le terme "sérialise"

---

Tu faits en sorte que les valeurs envoyés sur le serveur est de la forme

Citation:

---

var[]=0&var[]=1&var[]=2

---

Lesquelles tu les reçois comme en array du coté serveur.

Code:

---

$var=$_POST["var"];//$var est un array

---

Bon j'ai regardé et lu le lien vers Jquery et Ajax ;),

Une petite question pour être sure d'avoir compris:

J'envois mes valeur soit en GET ou POST avec Jquery vers un programme PHP qui va lui interragir avec la base de données? c'est bien ça?

Donnée à envoyer => envois avec Jquery (GET ou POST) vers .php => .php réalise la requête SQL = Les Données sont modifié sur le serveur.

:p petit schéma très simple.

Re,
Oui, t'as tous compris :ccool:.

Merci beaucoup ;) j'ai enfin compris comment ça fonctionne. Maintenant je vais passer au codage et je reviendrais pour montrer le résultat ou si j'ai d'autre question ;)

Je te remercie beaucoup pour ton aide qui m'a fait avancer :p

Re :p,

Bien au final j'ai trouvé une solution bien plus simple à mon problème et je pense qu'elle arrangera beaucoup de gens ;)

dans un premier temps j'ai mon code JS:

Code:

---

1 2 3 4 5

$(document).ready( function(){ $("#sortable").sortable(); $("#sortable").disableSelection(); });

---

et ensuite le HTML qui fait tout :p :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<form method="post" action="#"> <ul id="sortable"> <li class="ui-state-default" > <input type="hidden" name="list_ligne[]" value="1" />contenu</li> <li class="ui-state-default" > <input type="hidden" name="list_ligne[]" value="2" />contenu</li> <li class="ui-state-default" > <input type="hidden" name="list_ligne[]" value="3" />contenu</li> <li class="ui-state-default" > <input type="hidden" name="list_ligne[]" value="4" />contenu</li> </ul> <input id="save" value="enregistrer" type="submit"/> </form>

---

Bien maintenant j'explique ;)

J'utilise un code javascript simplement pour avoir la possibilité de déplacer mes 'li' comme je l'entend.

ensuite tout le travail de mémorisation d'ordre des lignes est effectué grâce à un formulaire.
Ce formulaire a pour chaque 'li' une balise 'input' du type hidden. Cette balise a comme attribut name un tableau qui va s'indexer automatiquement lors de l'envoi du formulaire dans lequel je place les id de mes lignes grace à l'attribut value.

ainsi j'envois au serveur un tableau list_ligne[] commençant à 0 rempli avec les id de mes lignes dans l'ordre où elle apparaisse à l'écran.

:p je chercher à faire de l'AJAX alors que la solution était bien plus simple et surtout cela me permet de mettre à jour mon Jquery UI sans pour autant toucher à toute ma logique.
:ccool: Merci tout de même pour le coup de main ;) car je sais maintenant utiliser l'AJAX pour d'autre choses :p c'est toujours utile ^^.

Sur ce Bonne journée ;)

Salut !
Je découvre avec bonheur ce sujet, car j'ai le même problème. Pourrais tu donner plus de détail quand à la dernière partie de ton code, celui qui traite la donnée ?
Merci !