Discussion :

[SimonLib]

Bonjour tout le monde, voici la problématique du jour :
utiliser sortable pour trier des listes entre elles et récupérer l'ordre globale des li de toutes les listes ...

voici le 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
 
<div class="sortable">
   <div id="element_triable_1">
       <header>bla bla bla</header>
       <ul>
          <li id="classement_1">texte 1</li>
          <li id="classement_2">texte 2</li>
          <li id="classement_3">texte 3</li>
       </ul>
   </div>
   <div id="element_triable_2">
       <header>bli bli bli</header>
       <ul>
          <li id="classement_4">texte 4</li>
          <li id="classement_5">texte 5</li>
          <li id="classement_6">texte 6</li>
       </ul>
   </div>
</div>

par ex : on passe la div element_triable_2 avant le element_triable_1, je veux récupérer les li dans l'ordre : classement_4, 5, 6, 1, 2, 3

J'arrive bien à implémenter sortable sur les div.sortable, on peut les manipuler les unes aux autres tout va bien.
Maintenant, je souhaite pouvoir récupérer les positions des li et les envoyer en ajax.
Je m’emmêle un peu les pinceaux entre les options "handle", "items" et le "serialize" :

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
 
function sortableElmt(){
 
	$(".sortable").sortable({
                handle: 'header',
		helper: 'clone',
                opacity: 0.5,
//                items: 'li',
		placeholder: "ui-state-highlight",
		containment: 'parent',
		forcePlaceholderSize: true,
                update: function(event, ui)
                {  
 
                   $.ajax({
                        type: 'POST',
                        data: $(this).sortable('serialize'),
                        url: "./ordre.php",
                        success: function(){
// fonction ok
                           },
                        error: function(XMLHttpRequest, textStatus, errorThrown){
// fonction non
                           }
                      })
                }
	});	return false;
}

Ce code envoi bien le ajax, mais le serialize est vide, il n'y a rien dans le POST ..

Solution 1 : récupérer avec des selecteurs les infos dont j'ai besoin; faire un tableau et l'envoyer en ajax
Solution 2 plus élégante, mais que je n'arrive pas à faire : utiliser les options items et serialize (ou toArray)

Si quelqu'un à une idée, une solution, une suggestion ...
Un grand merci d'avance !

[danielhagnoul]

Bonsoir

Je ne sais si c'est la meilleure solution, mais voilà un exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".sortable").sortable({
	update: function(event, ui){
		// exemple : element_triable[]=2&element_triable[]=1
		console.log( $(this).sortable('serialize') );
 
		var str = $("div.sortable").find("li").map(function(i, item){
			var r = this.id.split("_"); // ne fonctionnera pas si l'id contient deux "_"
			return (r[0] + "[]=" + r[1]);
		}).get().join("&");
 
		// exemple : classement[]=4&classement[]=5&classement[]=6&classement[]=1&classement[]=2&classement[]=3
		console.log( str );
	}
});

[SimonLib]

Bonjour Daniel,
Effectivement c'est ce à quoi j'avais pensé ... mais en plus élégant ! Merci !
Je me demande quand même s'il n'est pas possible de jouer avec l'option items de sortable ...
Enfin en tout cas ça fonctionne, merci de ta réponse, à bientôt !