Serializer des sous-listes (jQuery)

Version imprimable

Bonjour tout le monde,
Comme indiqué dans le titre de ce post, je souhaite sérializer toutes les sous-listes présentes sur ma page.
Actuellement, je n'arrive à sérializer que la liste principale, pas les sous-listes.

Je vous montre le code. Merci d'avance pour votre aide !

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
 
<html>
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
  function enreg_position()
  {
	serial = $(".list").sortable("serialize");
	$("#position").val(serial);
	alert(serial);
  }
  $(function() {
    $("ul.list").sortable({
		update: function(event, ui) { 
			enreg_position(); 
		}	
    });
  $("ul.list").selectable();
  $("ul.list").disableSelection();
 
  	$('ul.list').bind('mousedown', function(e) {
  		e.stopPropagation();
	});
 
});
</script>
</head>
<body>
  <ul class="list">
    <li id="chapitre_1">Chapitre 1</li>
    <li id="chapitre_2">Chapitre 2
    	<ul class="list">
    		<li id="chapitre_2_1">Chapitre 2.1</li>
        	<li id="chapitre_2_2">Chapitre 2.2</li>
      	</ul>
    </li>
    <li id="chapitre_3">Chapitre 3</li>
    <li id="chapitre_4">Chapitre 4</li>
    <li id="chapitre_5">Chapitre 5
    	<ul class="list">
            <li id="chapitre_5_1">Chapitre 5.1</li>
            <li id="chapitre_5_2">Chapitre 5.2</li>
            <li id="chapitre_5_3">Chapitre 5.3</li>
            <li id="chapitre_5_4">Chapitre 5.4</li>
      	</ul>
 
    </li>
    <li id="chapitre_6">Chapter 6</li>    
  </ul>
</body>
</html>

03/05/2011, 15h58
SpaceFrog

Code:

$('ul.list.ul.list')

??
03/05/2011, 16h33
SpiderNéo

Citation:

Envoyé par SpaceFrog

Code:

$('ul.list.ul.list')

??

Non, ça ne marche pas. Ca m'affiche un message : [object Object]
03/05/2011, 16h41
Loceka

A mon avis il voulait écrire $('ul.list ul.list')
03/05/2011, 16h48
SpaceFrog

arf ... exact loceka
03/05/2011, 17h22
SpiderNéo

J'avais bien compris, merci, mais c'est idem [object Object]

Bon je vous donne la solution que j'ai trouvé ;)

Il faut rajouter pour chaque balise enfant <ul>, un id.

Ce qui va nous donner ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ul class="list">
    <li id="chapitre_1">Chapitre 1</li>
    <li id="chapitre_2">Chapitre 2
    	<ul class="list" id="list2">
    		<li id="chapitre_2_1">Chapitre 2.1</li>
        	<li id="chapitre_2_2">Chapitre 2.2</li>
      	</ul>
    </li>
    <li id="chapitre_3">Chapitre 3</li>
    <li id="chapitre_4">Chapitre 4</li>
    <li id="chapitre_5">Chapitre 5
    	<ul class="list" id="list5">
            <li id="chapitre_5_1">Chapitre 5.1</li>
            <li id="chapitre_5_2">Chapitre 5.2</li>
            <li id="chapitre_5_3">Chapitre 5.3</li>
            <li id="chapitre_5_4">Chapitre 5.4</li>
      	</ul>
    </li>
    <li id="chapitre_6">Chapter 6</li>    
  </ul>

Ensuite, il ne reste plus qu'à les sélectionner via jQuery

Code:

1
2
3
 
$(".list #list2").sortable("serialize");
$(".list #list5").sortable("serialize");

et comme un ide est unique :
Code:

1 2 $("#list2").sortable("serialize"); $("#list5").sortable("serialize");

04/05/2011, 00h32
SpiderNéo
Citation:
Envoyé par SpaceFrog

et comme un ide est unique :

Code:

1 2 $("#list2").sortable("serialize"); $("#list5").sortable("serialize");
C'est vrai, merci !
04/05/2011, 08h26
Loceka

C'est quand même bizarre qu'il faille ajouter un ID pour que ça marche... :koi:
04/05/2011, 08h44
SpaceFrog

a mon avis le ul li ul fonctionne