Serializer des sous-listes (jQuery)

**SpiderNéo** · 03/05/2011, 15h35

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 :

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

**SpaceFrog** · 03/05/2011, 15h58

Code :

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

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

??

**SpiderNéo** · 03/05/2011, 16h33

Envoyé par SpaceFrog

Code :

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

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

??

Non, ça ne marche pas. Ca m'affiche un message : [object Object]

**Loceka** · 03/05/2011, 16h41

A mon avis il voulait écrire $('ul.list ul.list')

**SpaceFrog** · 03/05/2011, 16h48

arf ... exact loceka

**SpiderNéo** · 03/05/2011, 17h22

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

**SpiderNéo** · 03/05/2011, 18h02

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 :

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

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

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

**SpaceFrog** · 03/05/2011, 20h00

et comme un ide est unique :

Code :

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

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

**SpiderNéo** · 04/05/2011, 00h32

Envoyé par SpaceFrog

et comme un ide est unique :

Code :

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

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

C'est vrai, merci !

**Loceka** · 04/05/2011, 08h26

C'est quand même bizarre qu'il faille ajouter un ID pour que ça marche...

**SpaceFrog** · 04/05/2011, 08h44

a mon avis le ul li ul fonctionne

Serializer des sous-listes (jQuery)

jQuery

Discussions similaires

Partager

Partager