ajax追加后可排序不起作用答案

【问题标题】：sortable not working in after ajax appendajax追加后可排序不起作用
【发布时间】：2015-04-17 10:09:46
【问题描述】：

大家好，我有 2 个视图

1- index
2- Edit

在索引中，我有按钮和 ajax，我单击按钮传递 id 以控制器返回一个视图，因此我将此视图附加到一个 div 中。编辑视图有可排序的 div。附加编辑视图后可排序不起作用..我不明白为什么。请帮帮我..

这是我的 ajax 索引视图

<div id="CarrierList">
 <a  class="btn btn-primary"  onclick="getPage('@Url.Action("Edit", "Controller", new { id = Model.Items.ElementAt(i).ID })')"><span class="glyphicon"></span>Configure TradeLane</a>

  </div>

function getPage(page)
        {
            $('#loaderImg').modal('show')
            var hdnHeaderText = $('#hdnHeader').val();
            $('#spnHeader').text(hdnHeaderText);
            if (hdnHeaderText == 'Codes') {
                $('#backBtnDiv').hide();
            }
            else {
                $('#backBtnDiv').show();
            }
            $.ajax({
                type: "POST",
                url: page,
                xhrFields: {
                    withCredentials: true
                },
                success: function (html) {
                    $('#CarrierList').empty();
                    $('#CarrierList').append($.parseHTML(html));
                },
                error: function () {
                    var error = "Error occured during loading Carrier items...";
                    $('#errorMessage').empty();
                    $('#errorMessage').append(error);
                    $('#errorModal').modal('show');
                },
                complete: function ()
                {
                    $('#loaderImg').modal('hide');
                }
            });


        }

这里是带有 sortable + jquery 功能的编辑视图

<div id="sortable" class="connectedSortable" style="font-size:11px;">
    @for (int i = 0; i < Model.items.Count; i++)
    {
        if (Model.items.ElementAt(i).legindex == null)
        {
               <div class="ui-state-default" id="div__@(i)" style="height:55px;"><div id="@(Model.items.ElementAt(i).ID)">test</div>           
        }
    }
</div>


<div id="sortable2" class="connectedSortable"  style="font-size:11px;">
    @for (int i = 0; i < Model.items.Count; i++)
    {
        if (Model.items.ElementAt(i).legindex != null)
        {
                 <div class="ui-state-default" id="div__@(i)" style="height:55px;"><div id="@(Model.items.ElementAt(i).ID)">test</div>           
        }
    }
</div>

编辑视图 ajax

  $(function () {
            $("#sortable").sortable({
                connectWith: ".connectedSortable",
                cursor: "move",
                stop: function (event, ui) {
                    var ChildIdsArray, SpanIdsArray, ChildId, Divid, SpanID, SpanText;
                    ChildIDsArray = $("#sortable > div").map(function () { return this.id });
                    for (var i = 0; i < ChildIDsArray.length; i++) {
                        ChildId = ChildIDsArray[i];
                        SpanIdsArray = $("#" + ChildId + "> span").map(function () { return this.id });
                    }
                }
            }).disableSelection();

            $("#sortable2").sortable({
                connectWith: ".connectedSortable",
                handle: "span",
                cursor: "move",
                stop: function (event, ui) {


                }
            }).enableSelection();
        });

【问题讨论】：

日志中是否有任何错误？
尝试在 $('#CarrierList').append($.parseHTML(html)); 之后将可排序调用插入 ajax 成功。更好的做法是将您的可排序调用包装到一个函数中，并在将新元素附加到 DOM 之后以 ajax 成功调用该函数。
@kmsdev 你能编辑我的帖子你说什么..
我更愿意回答，因为如果我错了，你的代码仍然保持原样。 jQuery Promise 也可以工作。

标签： javascript jquery html ajax jquery-ui

【解决方案1】：

好吧，我建议这样做：

var success = false;
$.when(
$.ajax({
                type: "POST",
                url: page,
                xhrFields: {
                    withCredentials: true
                },
                success: function (html) {
                    $('#CarrierList').empty();
                    $('#CarrierList').append($.parseHTML(html));
                    success=true;//set a success message here
                },
                error: function () {
                    var error = "Error occured during loading Carrier items...";
                    $('#errorMessage').empty();
                    $('#errorMessage').append(error);
                    $('#errorModal').modal('show');
                },
                complete: function ()
                {
                    $('#loaderImg').modal('hide');
                }
      })).then(function(){
          if(success) //if its success then call this initializations
          {
               $("#sortable").sortable({
               connectWith: ".connectedSortable",
               cursor: "move",
               stop: function (event, ui) {
                     var ChildIdsArray, SpanIdsArray, ChildId, Divid, SpanID, SpanText;
                     ChildIDsArray = $("#sortable > div").map(function () { return this.id });
                       for (var i = 0; i < ChildIDsArray.length; i++) {
                            ChildId = ChildIDsArray[i];
                            SpanIdsArray = $("#" + ChildId + "> span").map(function () { return this.id });
                       }
                    }
                }).disableSelection();

               $("#sortable2").sortable({
                    connectWith: ".connectedSortable",
                    handle: "span",
                    cursor: "move",
                    stop: function (event, ui) {
                  }
               }).enableSelection();
             }
     });;

【讨论】：

任何时候.. 快乐编码.. :)

【解决方案2】：

我认为你应该使用https://api.jqueryui.com/sortable/#method-refresh。示例：

$('#sortable").sortable( "refresh" );

【讨论】：

【解决方案3】：

可能是这样的：

// in your main view

function getPage(page){
    $('#loaderImg').modal('show')
    var hdnHeaderText = $('#hdnHeader').val();
    $('#spnHeader').text(hdnHeaderText);
    if (hdnHeaderText == 'Codes') {
        $('#backBtnDiv').hide();
    }
    else {
        $('#backBtnDiv').show();
    }
    $.ajax({
        type: "POST",
        url: page,
        xhrFields: {
            withCredentials: true
        },
        success: function (html) {
            $('#CarrierList').empty();
            $('#CarrierList').append($.parseHTML(html));
            DoSortables();
        },
        error: function () {
            var error = "Error occured during loading Carrier items...";
            $('#errorMessage').empty();
            $('#errorMessage').append(error);
            $('#errorModal').modal('show');
        },
        complete: function ()
        {
            $('#loaderImg').modal('hide');
        }
    });


}

function DoSortables(){
    $("#sortable").sortable({
        connectWith: ".connectedSortable",
        cursor: "move",
        stop: function (event, ui) {
            var ChildIdsArray, SpanIdsArray, ChildId, Divid, SpanID, SpanText;
            ChildIDsArray = $("#sortable > div").map(function () { return this.id });
            for (var i = 0; i < ChildIDsArray.length; i++) {
                ChildId = ChildIDsArray[i];
                SpanIdsArray = $("#" + ChildId + "> span").map(function () { return this.id });
            }
        }
    }).disableSelection();

    $("#sortable2").sortable({
        connectWith: ".connectedSortable",
        handle: "span",
        cursor: "move"
    }).enableSelection();
}

【讨论】：