Serializer des sous-listes (jQuery) [Résolu]

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

Citation:

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

Citation:

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

03/05/2011, 15h58	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	Code : Sélectionner tout - Visualiser dans une fenêtre à part $('ul.list.ul.list') ?? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

03/05/2011, 16h48	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	arf ... exact loceka __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

04/05/2011, 08h44	#11
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	a mon avis le ul li ul fonctionne __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

03/05/2011, 16h41	#4
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	A mon avis il voulait écrire $('ul.list ul.list')
	00

03/05/2011, 17h22	#6
SpiderNéo Invité de passage Inscription : mars 2008 Messages : 15 Détails du profil Informations forums : Inscription : mars 2008 Messages : 15 Points : 3 Points : 3	J'avais bien compris, merci, mais c'est idem [object Object]
	00

04/05/2011, 08h26	#10
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	C'est quand même bizarre qu'il faille ajouter un ID pour que ça marche...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email