Question

嘿大家我有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');
                }
            });


        }

这里是带有可排序+ 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();
        });

Answer 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();
             }
     });;

Answer 2

我认为你应该使用docs。示例：

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

Answer 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();
}

在ajax追加之后可以排序

3 个答案: