Using jquery sortable with ajax and php

Question

I am trying to use jQuery sortable and then save the changes to the database, however before I even get to updating the database I have something strange going on that I can't fathom. If I log the serialised data to the console, I get all items in the 'list' but if I echo out the json encoded array from the php script I only get one item - confused.com.

The jquery at the moment is:

$('#sortable-list').sortable({
    //handle : '.handle',
    update : function () {
        var order = $(this).sortable('serialize');
        var table = $(this).parent().attr('id');
        console.log(order);
        $.ajax ({
            type: "POST",
            url: templateDir + "/inc/changeSortOrder.php",
            data: "order=" + order + "&sort=1&sort_table=" + table,
            dataType: "json",
            cache: false,
            success: function(data)
            {
                console.log(data);
            }
        });
    }
});

The PHP at the moment is:

if (isset($_POST['sort']) && $_POST['sort'] == 1) {

if ($_POST['sort_table'] == 'nationalities') {
    $output = array();
    $list = parse_str($_POST['order'], $output);
    echo json_encode($output);
}

} The console log gives me:

nationality[]=17&nationality[]=1&nationality[]=47&nationality[]=23&nationality[]=3&nationality[]=4&nationality[]=5&nationality[]=6&nationality[]=7&nationality[]=8&nationality[]=12&nationality[]=10&nationality[]=11&nationality[]=13&nationality[]=14&nationality[]=15&nationality[]=16&nationality[]=18&nationality[]=19&nationality[]=20&nationality[]=21&nationality[]=22&nationality[]=24&nationality[]=25&nationality[]=26&nationality[]=27 etc

And the echo json gives me:

Object {nationality: Array[1]}
nationality: Array[1]
0: "17"
length: 1

So for some reason the full array isn't being passed through to the PHP file and I can't work out why.

what happens if you add async: false to your jQuery post request ? — Maximus2012
– Maximus2012, Commented Sep 10, 2013 at 16:09

Bogdan · Accepted Answer · 2013-09-10 16:20:51Z

2

Your problem is that you are trying to assign a serialized array, to a single query string parameter, which will yield an incorrect query string. Try passing the serialized list as returned by the plugin serialize method like so:

$.ajax ({
    type: "POST",
    url: templateDir + "/inc/changeSortOrder.php",
    data: order + "&sort=1&sort_table=" + table,
    dataType: "json",
    cache: false,
    success: function(data)
    {
        console.log(data);
    }
});

And then access the passed list in php with:

$list = $_POST['nationality'];

answered Sep 10, 2013 at 16:20

Bogdan

44.7k12 gold badges130 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The Baker Over a year ago

That's great Bogdan, works a charm thank you (I did think about just posting through order but wasn't sure how that would work)

Collectives™ on Stack Overflow

Using jquery sortable with ajax and php

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related