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。我打算让它可拖动，因此使用了可排序的。

在调试时，我无法获得变量＆＃39;中的任何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>

JavaScript w / jQuery：

$(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");

});

使用jquery序列化无序列表

1 个答案: