AJAX: object naar array

Door Sam Clauw op 21-03-2015 14:16

1.692 views

Hallo topic lezers!

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?

Thomas van den Heuvel

21-03-2015 17:09

Als je POST, zou je dan niet serialize() moeten gebruiken in plaats van toArray()?

Sam Clauw

21-03-2015 20:53

Kan je dan nooit toArray gebruiken als je iets doorstuurt via POST? Serialize geeft een erg simpele string terug met enkel de id's en parent id's van de nodes :(

Thomas van den Heuvel

21-03-2015 20:54

Je kunt arrays prima serialiseren ;-).

Sam Clauw

22-03-2015 11:08 gewijzigd op 22-03-2015 11:08

OK, je info helpt me al aardig op weg, 'k snap in ieder geval het gebruik van serialize() en unserialize() en da's al een grote stap vooruit ;)
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:

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:


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

Thomas van den Heuvel

22-03-2015 14:38

Het werkt mogelijk al goed zonder unserialize() aan de PHP-kant. Heb je geprobeerd je $_POST data eens ongewijzigd te dumpen? PHP regelt veel automatisch (URL decoding, het (terug)zetten in een array). Mogelijk hoef je niets aan te passen in je $_POST en is alles direct bruikbaar?

Als dat niet werkt moet je je informatie mogelijk toch anders "verpakken" aan de verzend-kant.

Sam Clauw

22-03-2015 15:07 gewijzigd op 22-03-2015 15:08

Dit is de array die ik momenteel in de php file binnen krijg:

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

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?

Thomas van den Heuvel

22-03-2015 15:35

Dat had je toch al geconstateerd? :)

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().

Sam Clauw

27-03-2015 22:11 gewijzigd op 27-03-2015 22:12

Als ik wat info over jquery serialize op zoek, dan lees ik telkens dat dit in combinatie is met een formulier (input, textarea, select) moet gebeuren.

&

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

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

Thomas van den Heuvel

27-03-2015 22:38 gewijzigd op 27-03-2015 23:14

BLEH

Gebruik JSON.stringify() aan de verzendkant en json_decode($_POST['whatever'], true) aan de ontvangstkant, dat werkt.

index.htm

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

test.php

<?php
header('Content-Type: text/html; charset=UTF-8');
echo '<pre>'.print_r(json_decode($_POST['whatever'], true), true).'</pre>';
?>

Sam Clauw

28-03-2015 12:24

Fan-tas-tisch, dit is echt wat ik nodig had! 'k Heb hier echt wel veel mee bijgeleerd, dus m'n dank is groot!
'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!

Reageren

Inloggen om te reageren