Question

我很擅长使用JQuery（和stackoverflow），对于凌乱的代码（和问题）感到抱歉。

我遇到了来自JQuery ui的sortable（'serialize'）的问题。

我正在创建一个连接的可排序列表，您可以在其中单击第二个列表，打开一个显示更多内容的模式。

显示页面并创建sortables工作的代码。甚至序列化也似乎有效。

当我打开模态，再次关闭它然后尝试序列化时出现问题。那时我得到以下错误

Uncaught TypeError: $(...).sortable is not a function

首先，我创建两个列表，其中添加了一些代码，以便在单击列表nr2中的项目时显示模态

    @{int i = 0; int y = 0;}
<ul class="connectedSortable list-group" id="sortable1">
    @foreach (var item in Model.AvailibleSteps)
    {
        <!--Id needs a - or it returns an empty string-->
        <li class="list-group-item" id="Av-@(y)">
            @Html.DisplayFor(model => item.Name)
        </li>
        y++;
    }

</ul>
<ul class="connectedSortable list-group" id="sortable2">
    @foreach (var item in Model.ChosenSteps)
    {
        <li class="list-group-item" id="Ch-@(i)" style="cursor:pointer" data-toggle="modal" data-target="#ChooseStepModal">
            <p class="StepIDText" style="display:none">@Html.DisplayFor(model => item.ID)</p>
            <p class="PlanIDText" style="display:none">@Html.DisplayFor(model => model.StepPlanID)</p>
            <p class="StepName">@Html.DisplayFor(model => item.Name)</p>
        </li>
        i++;
    }
</ul>
<input type="button" id="save" value="SAVE" />

在这堆杂乱的代码之后，我使用jquery来填充模态

        $('#ChooseStepModal').on('show.bs.modal', function (event) {
        var element = $(event.relatedTarget); // the tr that triggered the modal to show
        var myStapID = element.find('.StepIDText').text();
        var myPlanID = element.find('.PlanIDText').text();
        var myStapNaam = element.find('.StepName').text();
        var modal = $(this);
        $('popupHeader').html(myStepName);
        $.ajax({
            url: '@Url.Action("ChooseAssignments", "Home")',
            type: 'GET',
            data: { stepID: myStepID, planID: myPlanID },
            success: function (partialView) {

                $('#popup').html(partialView);
                $('#popup').show();
            }
        });
    });

最后我还将列表排序，并设置快速警报以检查它是否已序列化

    $('#sortable1,#sortable2').sortable({
        connectWith: ".connectedSortable",
        items: "li:not(.dontsort)"
    }).disableSelection();

    $('#save').click(function () {
        alert($('#sortable2').sortable('serialize'));
    });

在打开模态之前按下保存按钮时，它会响应结果。但在打开和关闭模型后，它会给出前面提到的类型错误。

未捕获的TypeError：$（...）。sortable在显示模态后不是函数

0 个答案: