Need help getting the output from nestedSortable jQuery

I have found a fantastic jquery plugin called nestedSortable which is working great. Now all I need to do is update my db with the new sorting order. I am using PHP.

This is where I am getting confused. In the example provided there are three methods for getting the output. Serialize, Hierarchy and Array.

How can I modify the javascript to allow me to send the output开发者_StackOverflow社区 to PHP for processing via POST?

I have read through the whole plugin forum and found a glimmer of hope in the form of a save function from someone who wanted this exact functionality. Unfortunately it was BYO getItemIdFromElement($element) and the developer of the plugin said his array function did exactly the same thing with cleaner code...

I hope and would really appreciate if someone could please help me to understand this!

Tim

---

I experienced the problem myself as well. On the forum there is a solution posted to save the list via a form (form solution). Personally I prefer AJAX, so I wrote my own solution. To solve your problem the AJAX way you'll have to change the code as follows:

Change:

    $('ol.sortable').nestedSortable({
        disableNesting: 'no-nest',
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        maxLevels: 3,
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div'
    });

In:

$('ol.sortable').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    maxLevels: 3,
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    update: function () {
        list = $(this).nestedSortable('toHierarchy', {startDepthCount: 0});
        $.post(
            'http://www.domainname.com/ajax/ajax.php',
            { update_sql: 'ok', list: list },
            function(data){
                $("#result").hide().html(data).fadeIn('slow')
            },
            "html"
        );
    }
});

Then you need to create an ajax.php page where you process the data:

<? if (!empty($_REQUEST["list"]) && !empty($_REQUEST["update_sql"])) {

if ($_REQUEST["update_sql"] = 'ok') {

    if (!empty($_REQUEST["list"])) {
        $list = $_REQUEST["list"];
        foreach ($list as $key => $value) {

            mysql_query("UPDATE categories SET order = '" . $key . "' WHERE id = '" . $value['id'] . "'");

        }
        echo '<span class="success">Successfully updated.</span>';
    }
} } ?>

The PHP code can be improved (to check for MySQL injections etc.). You can also drop the additional functions provided in the example as you don't need them. Don't forget to change the POST URL in the JavaScript ;) Good luck!

---

You can use .ajax() to send the serialized data to your PHP script and specify POST as your data type.

You could also fill a form with hidden values, then submit, but that seems dirty.