使用jQuery序列化無序列表

Question

我已經在列表中使用了列表，並且打算將使用jquery的ID發送到另一個php文件（updateDB.php）。

我嘗試序列化列表，但無法獲取數據。 我不確定我是否正確，嘗試環顧四周，但無法弄清楚代碼出了什么問題。

<ul>
<li id="recordsArray_<?some number?>"><?php echo content?>`

    <ul>
        <?php
        while (some condition) {
            ?>
            <div>
            <li id="subArray_<another number?>"><?php echo content?></li>
            </div>
            <?php
            //conditions - increment within the loop
        }
        ?>
    </ul>
 </li></ul>

jQuery代碼是這樣的，

$(document).ready(function() {
    $(function() {
        $("#contentLeft ul").sortable({opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable('serialize') + '&action=updateMenuListings';
            $.post("updateDB.php", order, function(theResponse) {
                $("#contentRight").html(theResponse);
            });
        }});
    });

    $(function() {
        $("#contentLeft ul li ul").sortable({opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable('serialize') + '&action=updateSubListings';
            $.post("updateDB.php", order, function(theResponse) {
                $("#contentRight").html(theResponse);
            });
        }});
    });
});

id的contentLeft只是列表之前的ID。 我打算使其可拖動，因此可以排序。

在調試時，我無法獲取變量“ order”中列表的任何ID。

請檢查代碼並提供幫助。

謝謝

Answer 1

在下面，您會發現一些結構與您一樣的HTML以及JavaScript和jQuery，可以完成您想要的事情。 這使您可以移動頂級項目及其所有子項目，或僅重新排列子項目。 這兩個選項都會生成一個正文，您可以在注釋掉的后行中使用它。

您可以在這里查看它的運行情況： http : //jsfiddle.net/WTjsG/

HTML：

<div id="ContentLeft">Sortable With Update
    <ul id="Nav" class="sortable navLevel1">
        <li id="Nav_1">Nav1
            <!-- NOTE: format id's for UL and LI items as <name>_<int> for serialize to work properly -->
            <ul id="NavRecords_1" class="sortable navLevel2">
                <li id="Nav1_1">Nav1 Item1</li>
                <li id="Nav1_2">Nav1 Item2</li>
                <li id="Nav1_3">Nav1 Item3</li>
                <li id="Nav1_4">Nav1 Item4</li>
            </ul>
        </li>
        <li id="Nav_2">Nav2
            <ul id="NavRecords_2" class="sortable navLevel2">
                <li id="Nav2_1">Nav2 Item1</li>
                <li id="Nav2_2">Nav2 Item2</li>
                <li id="Nav2_3">Nav2 Item3</li>
                <li id="Nav2_4">Nav2 Item4</li>
            </ul>
        </li>
    </ul>
</div>

帶jQuery的JavaScript：

$(document).ready(function () {
    var isDebugMode = true;

    //Set common sort settings for all lists
    $(".sortable").sortable({
        opacity: 0.6,
        cursor: 'move'
    });

    //Function used to configure update calls for each sort
    function setSortAction(selector, updatePage, updateAction, itemLabel) {
        $(selector).sortable({
            update: function () {
                var itemList = $(this).sortable(
                    "serialize", {
                    attribute: "id",
                    key: itemLabel
                });

                //Create POST request to persist the update
                var bodyContent = "action=" + updateAction + "&" + itemList;
                if (isDebugMode) { alert("DEBUG: bodyContent = \n" + bodyContent); }
                //$.post(updatePage, bodyContent, function (postResult) { alert(postResult); });
            }
        });
    }

    //Set sort update action for top level and second level
    setSortAction(".navLevel1", "updateDB.php", "updateMenuListings", "record");
    setSortAction(".navLevel2", "updateDB.php", "updateMenuItemListings", "record");

});