JQuery sortable function return empty string

Question

Here this sortable function is return emplty string

Index.cshtml

<div id="sortable" class="col-lg-9 col-md-9">
    @foreach (var chart in Model.Charts)
    {
        <div class="col-lg-4 col-md-6 hidden" id=@string.Format("chartNumber{0}", chart.ChartOrder)>
            <figure class="highcharts-figure1">
                <div id=@string.Format("container{0}", chart.ChartOrder)></div>
            </figure>
        </div>
    }
</div>

Javascript

$("#sortable").sortable({
    containment: 'parent',
    cursor: 'move',
    scroll: false,
    update: function () {
        var order = $("#sortable").sortable('serialize');
        console.log(order); // emplty string
    }
});

I want that when user update the charts order then new array should be formed so that i can send this array to the Post function so that i can store the sequence of the charts. But here this sortable function is return empty string, so need help

Answer 1

I want that when user update the charts order then new array should be formed so that I can send this array to the Post function so that I can store the sequence of the charts.

In API documentation of Sortable plugin, we can find:

It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".

So to achieve your requirement, please modify the code like below.

Set Id of item as setname_number

<div class="col-lg-4 col-md-6" id=@string.Format("setname_{0}", chart.ChartOrder)>

Get new item order

update: function () {

    //specify `key` based on your actual requirement
    var order = $("#sortable").sortable("serialize", { key: "sort" });
    console.log(order); 
}

Test Result