1

リスト内でリストを使用しましたが、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 を取得できません。

コードをチェックして、助けてください。

ありがとう

4

1 に答える 1

0

以下に、必要なことを行うための JavaScript と jQuery とともに、あなたのような構造の HTML をいくつか示します。これにより、最上位のアイテムをそれぞれのサブアイテムとともに移動したり、サブアイテムを並べ替えたりすることができます。どちらのオプションも、コメントアウトされた投稿行で使用できる本文を生成します。

ここで実際の動作を確認できます: 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 と 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");

});
于 2013-09-07T14:52:34.843 に答える