Hoe verkrijg je data uit nestedSortable jQuery plugin?
Code (js)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
$(function() {
$('.sortable').nestedSortable({
'listType': 'ul',
'handle': 'div',
'items': 'li',
'toleranceElement': '> div',
'isTree': true,
'opacity': 0.5,
'cursor': 'move',
'revert': 100,
'stop': function (event, ui) {
var data = $(this).nestedSortable('serialize');
console.log(data);
console.log('test');
// POST naar server ($.post of $.ajax)
$.ajax({
data: data,
type: 'POST',
url: '<?php echo $this->here; ?>'
});
}
});
});
</script>
$(function() {
$('.sortable').nestedSortable({
'listType': 'ul',
'handle': 'div',
'items': 'li',
'toleranceElement': '> div',
'isTree': true,
'opacity': 0.5,
'cursor': 'move',
'revert': 100,
'stop': function (event, ui) {
var data = $(this).nestedSortable('serialize');
console.log(data);
console.log('test');
// POST naar server ($.post of $.ajax)
$.ajax({
data: data,
type: 'POST',
url: '<?php echo $this->here; ?>'
});
}
});
});
</script>
De "test" print hij succestvol naar de console, maar de data toont hij helemaal niet. Ik probeerde ook al iets in de aard van:
Code (js)
1
var data = $('.sortable').nestedSortable('serialize');
Hier is, voor de duidelijkheid, m'n HTML tree:
Code (php)
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<ul class="tree sortable level-1">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Pagina's</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
<ul class="level-3">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Tweede niveau</div>
</div>
<ul class="level-4">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Derde niveau</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Derde niveau (2)</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Attracties</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Sorteren</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Types</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Eigenschappen</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Constructeurs</div>
</div>
</li>
</ul>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Nieuws</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
</li>
</ul>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Dieren</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Sorteren</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Eigenschappen</div>
</div>
</li>
</ul>
</li>
</ul>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Pagina's</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
<ul class="level-3">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Tweede niveau</div>
</div>
<ul class="level-4">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Derde niveau</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Derde niveau (2)</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Attracties</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Sorteren</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Types</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Eigenschappen</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Constructeurs</div>
</div>
</li>
</ul>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Nieuws</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
</li>
</ul>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Dieren</div>
</div>
<ul class="level-2">
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Toevoegen</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Sorteren</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="random"><span class="glyphicon glyphicon-random"></span></div>
<div class="name">Eigenschappen</div>
</div>
</li>
</ul>
</li>
</ul>
Iemand die mij kan vertellen hoe ik de data na het sorteren kan ophalen? Wat doe ik mogelijk verkeerd in m'n javascript "stop" fallback functie?
Gewijzigd op 28/12/2014 12:15:47 door Sam Clauw
Gewijzigd op 29/12/2014 19:53:56 door Sam Clauw
Uncaught TypeError: Cannot read property 'match' of undefined
Ik begrijp deze foutmelding niet echt. Op de demo pagina van de nestedSortable plugin werkt alles goed, al wordt de array daar wel met een knop opgeroepen. Heeft er niemand ervaring met de nestedSortable plugin? :)