AJAX: object naar array
Ik zoek naar een oplossing om de jQuery nestedSortable plugin werkend te krijgen. 't Is te zeggen: alles gaat goed, behalve het doorsturen van de object gegevens die de plugin ter beschikking stelt.
Wanneer ik de console check na elke boomstructuur aanpassing, dan krijg ik een overzicht van objecten te zien:
[Object, Object, Object, Object, Object, Object]
0: Objectdepth: 0item_id: nullleft: "1"parent_id: "none"right: 12__proto__: Object
1: Objectdepth: 1item_id: "1"left: 2parent_id: nullright: 3__proto__: Object
2: Objectdepth: 1item_id: "2"left: 4parent_id: nullright: 7__proto__: Object
3: Objectdepth: 2item_id: "3"left: 5parent_id: "2"right: 6__proto__: Object
4: Objectdepth: 1item_id: "4"left: 8parent_id: nullright: 9__proto__: Object
5: Objectdepth: 1item_id: "5"left: 10parent_id: nullright: 11__proto__: Object
length: 6__proto__: Array[0]
Wanneer ik deze gegevens via AJAX probeer door te sturen naar een php file, dan krijg ik telkens "undefined":
Form Data:
undefined=&undefined=&undefined=&undefined=&undefined=&undefined=
Hier vind je alvast een jsFilldle dat m'n situatie beter uit de doeken doet.
Iemand die me kan helpen hiermee? Ik denk (hoop) dat dit met een kleine code aanpassing kan worden opgelost?
Het vreemde is echter dat de serialize niet lijkt te werken. Wanneer ik in de php file een urserialize doe, dan krijg ik namelijk de volgende foutmelding:
Quote:
Warning (2): unserialize() expects parameter 1 to be string, array given [APP\Plugin\CoasterCms\Controller\CmsPagesController.php, line 107]
De code lijkt me nochtans niet verkeerd te zijn:
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
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() {
var ns = $('.sortable').nestedSortable({
'listType': 'ul',
'handle': 'div',
'items': 'li',
'toleranceElement': '> div',
'isTree': true,
'opacity': 0.5,
'cursor': 'move',
'revert': 100,
'stop': function(){
var tree = $(this).nestedSortable('serialize');
// POST naar server ($.post of $.ajax)
$.ajax({
url: '<?php echo $this->here; ?>',
data: tree,
type: 'POST'
});
}
});
});
</script>
$(function() {
var ns = $('.sortable').nestedSortable({
'listType': 'ul',
'handle': 'div',
'items': 'li',
'toleranceElement': '> div',
'isTree': true,
'opacity': 0.5,
'cursor': 'move',
'revert': 100,
'stop': function(){
var tree = $(this).nestedSortable('serialize');
// POST naar server ($.post of $.ajax)
$.ajax({
url: '<?php echo $this->here; ?>',
data: tree,
type: 'POST'
});
}
});
});
</script>
Enig idee waarom de serialize het bij mij niet doet?
Gewijzigd op 22/03/2015 11:08:34 door Sam Clauw
Als dat niet werkt moet je je informatie mogelijk toch anders "verpakken" aan de verzend-kant.
Quote:
array(
(int) 2 => 'null',
(int) 3 => '2',
(int) 16 => '3',
(int) 17 => '16',
(int) 4 => 'null',
(int) 5 => '4',
(int) 6 => '4',
(int) 7 => '4',
(int) 8 => '4',
(int) 9 => '4',
(int) 13 => '9',
(int) 10 => 'null',
(int) 11 => '10',
(int) 12 => 'null',
(int) 14 => '12',
(int) 15 => '12'
)
(int) 2 => 'null',
(int) 3 => '2',
(int) 16 => '3',
(int) 17 => '16',
(int) 4 => 'null',
(int) 5 => '4',
(int) 6 => '4',
(int) 7 => '4',
(int) 8 => '4',
(int) 9 => '4',
(int) 13 => '9',
(int) 10 => 'null',
(int) 11 => '10',
(int) 12 => 'null',
(int) 14 => '12',
(int) 15 => '12'
)
Zoals je kan zien gaat het hier om een array met erg beperkte node info. Dus "serialize" is dan toch een no-go in mijn geval?
Gewijzigd op 22/03/2015 15:08:10 door Sam Clauw
Wat ik met mijn "Je kunt arrays prima serialiseren ;-)." reactie bedoelde is:
je gebruikt de toArray() methode van je nestedSortable tree, en vervolgende POST je die data door deze te serializen via de jQuery-functie .serialize().
https://api.jquery.com/serialize/ & http://www.w3schools.com/jquery/ajax_serialize.asp
Da's bij mij dus niet echt het geval. Kan je überhaupt wel een dergelijke objecten array omzetten naar iets wat via AJAX leesbaar wordt?:
Quote:
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
depth: 0
item_id: null
left: 1
parent_id: null
right: 34
__proto__: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
12: Object
13: Object
14: Object
15: Object
16: Object
length: 17
__proto__: Array[0]
0: Object
depth: 0
item_id: null
left: 1
parent_id: null
right: 34
__proto__: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
12: Object
13: Object
14: Object
15: Object
16: Object
length: 17
__proto__: Array[0]
Gewijzigd op 27/03/2015 22:12:17 door Sam Clauw
Gebruik JSON.stringify() aan de verzendkant en json_decode($_POST['whatever'], true) aan de ontvangstkant, dat werkt.
index.htm
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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="dump"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
var arr = {
'one': {
'subone': {'test': 'a', 'set': [1,2,3,4]}
},
'two': {
'subtwo': {'lala': 'hoi', 'set': [1,2,5,3]}
}
};
$.post('test.php', {'whatever': JSON.stringify(arr)}, function() {
alert('cake');
})
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="dump"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
var arr = {
'one': {
'subone': {'test': 'a', 'set': [1,2,3,4]}
},
'two': {
'subtwo': {'lala': 'hoi', 'set': [1,2,5,3]}
}
};
$.post('test.php', {'whatever': JSON.stringify(arr)}, function() {
alert('cake');
})
});
//]]>
</script>
</body>
</html>
test.php
Code (php)
Gewijzigd op 27/03/2015 23:14:38 door Thomas van den Heuvel
't Was nog even zoeken om de JSON data in CakePHP om te zetten, maar da's uiteindelijk ook gelukt. Dikke merci voor de opvolging Thomas!