Question

I have successfully implemented JQuery Sortable. I can also write it to the database using a separate call. However this only works for the first set of matching classes that are affected. The second, and I presume subsequent if there were any, don’t work.

<ul class="grouped-articles-list">
      <li id="4weight10"></li>
      <li id="3weight20"></li>
      <li id="2weight30"></li>
</ul>

<ul class="grouped-articles-list>
      <li id="5weight50"></li>
      <li id="6weight60"></li>    
      <li id="22weight70"></li>
      <li id="18weight80"></li>     
</ul>

I have multiple ULs that all share a common Class. The visual side all works correctly with them being fully sortable. I then write the objects to an array, Array = $(“.grouped-articles-list”).sortable(‘toArray’) and then call an ajax function. If I do a trace/console.log it only ever returns the objects of the previous (1st) class.

Is it possible to use Classes for multiple occasions and still be able to use the ToArray? In this instance if I were affecting the 2nd UL and did a trace it would still return [“4weight10”, “3weight20”, “2weight30”].

I will paste my code below, but It is a little verbose…

function makeSortable(){
    var before;
    var weight; 
    var newWeight = [];
    var newID = [];

    $(".grouped-articles-list").sortable({
        tolerance: 'pointer',   
        items: "li:not(.sortable_disabled)",
        start: function(event, ui){
            newWeight.length = 0;
            var resultbefore = $(".grouped-articles-list").sortable('toArray');
            before = resultbefore;
            //goes through each item and saves their weight to an array
            $.each(before, function(i) { 
            newWeight.push(splitWeightFromId(before[i])[3]);               
            });
        },
        stop: function(event, ui) {
            newID.length = 0;
            var after = $(".grouped-articles-list").sortable('toArray');
            $.each(after, function(i) { 
            //goes through each item in the array and saves out their id  
            newID.push(splitWeightFromId(after[i])[1]);
            // Only adds changed items
            if (newID[i] !== splitWeightFromId(before[i])[1]){
            //as the items move, but the weights stay the same
            //sends the affected ID with the always stationary weight off
               change_weight( newID[i], newWeight[i] )
        }     
    });
});

Ajax Function

function change_weight( link_id, new_weight ) { 
  $.ajax({
        type: "PUT",
        url:    "/article_relationships/" + link_id,
        data: {article_relationship : {
                                    weight : new_weight
                                    } },
        datatype: "js",
        remote: "true"
      });
}

Thank you for your time,

Any hints, tips or suggestions are more than welcome.

Answer 1

I managed to fix this, could be a better way but creating an array and going through it for each item worked fine.

sortableArray = ($('.grouped-articles-list'));
    $(sortableArray).each(function(index){
    $(sortableArray[index]).sortable({
        tolerance: 'pointer', 
        items: "li:not(.sortable_disabled)", 
        start: function(event, ui){ 
          newWeight.length = 0; var resultbefore = $(sortableArray[index]).sortable('toArray');