Missing info in documentation: how to extract newly ordered array to store preference / order ON THE SERVER

[mynona]

There is definitely a very important part left out in the documentation:

Once a new order has been created on the client side you want to extract the new order because you might want to store it on the server and not only locally for a specific client.

It took me a while to figure it out and this comment guided me:
https://stackoverflow.com/questions/63569279/saving-and-resetting-order-in-sortablejs

When you initialise Sortable you must call the toArray method:

var sortable = Sortable.create(sortableGridItems,
{ animation: 200
 });

var initialOrder = sortable.toArray();

document.getElementById('saveCurrOrder').addEventListener('click', function(e) {
    // print current order
    var order = sortable.toArray();
    console.log(order);
});

Additionally you must assign to each element (in my case those are Divs) the 'data-id' attribute:

<div class="some-class-definitions-bla-bla" data-id="12F19A45-9C45-426B-9535-19F6289A8DFB">

Html Button to trigger the JavaScript output to the console:

<button id="saveCurrOrder" class="mb-5">Print order</button>

Console output:

Array (26)
0 "F5C8625A-DB68-4AB3-A3A1-07A349B803F8"
1 "3A272EAB-ABD1-4CD2-BC0C-0A59309DBAF7"
2 "6C2B4698-83CC-427E-9506-29A32A53BD43"
3 "76CADE5A-4C3D-48D9-9131-BBC8D520F858"
4 "D6481C13-6A4C-4A54-8EC0-8487BDF0B427"
5 "D7461DF1-8F38-490E-9D02-8CCC26724CD7"
6 "89F0B6A0-A07D-4FDE-AAD5-7066A1041892"
7 "FFC96A3E-A813-452A-97EF-2B9B282C4220"
8 "E3E2B40E-6BF2-4589-96B9-91D42BD60CE2"
9 "73966151-12D3-4F3B-999B-DCD07EF35FF4"
10 "B764A914-B27F-492C-AEC6-8DB2B2248FD0"
11 "D3EB0E08-BBA7-4251-94B1-2FD81EBF2C07"
12 "3103A126-8548-4D5B-8380-F8895A6CAA4F"
13 "4AEA2FE8-C9AD-407B-9EFC-FE294E4E52AC"
14 "99158335-6C7B-4EF9-B18B-4E6E609C5CF4"
15 "007148CF-1365-4195-BDFB-F9A9391F72F0"
16 "1B441072-9FBC-4AD9-B606-BEB7AE279D41"
17 "F350CDAF-4160-42E4-A72B-29F578A76A2E"
18 "1479FEAA-346C-4E3A-965E-8611C02F06CF"
19 "D2D0B539-180C-4798-83E0-499178C42862"
20 "7AADC054-3F91-4EA7-BCE6-8392A36DEAFD"
21 "D5E5C0DC-E79D-41BA-91FA-910E02AAFDE5"
22 "FE4A87B3-2F01-47BA-8313-18216CFDF96C"
23 "E2FE8C74-955C-4B1B-8452-0F01744FEEC5"
24 "521BA7FB-DC06-4BA4-9B9C-17A787293A29"
25 "12F19A45-9C45-426B-9535-19F6289A8DFB"

Sending to the server via POST:

// Send to Server
document.getElementById('Server').addEventListener('click', function(e) {
   var order = sortable.toArray();
   var json = '{"items":' + JSON.stringify(order) + '}';
   fetch('/test/', {
      method: 'POST',
      body: json,
      headers: {
         'Content-type': 'application/json; charset=UTF-8'
      }
   })
});

This will generate the following request:

POST /test/ HTTP/1.1
Host: 127.0.0.1:8080
Content-Type: application/json; charset=UTF-8
Origin: http://127.0.0.1:8080
Accept-Encoding: gzip, deflate
Connection: keep-alive
Accept: */*
Referer: removedData
Content-Length: 1025
Accept-Language: de-DE,de;q=0.9
{"items":["F5C8625A-DB68-4AB3-A3A1-07A349B803F8","3A272EAB-ABD1-4CD2-BC0C-0A59309DBAF7","6C2B4698-83CC-427E-9506-29A32A53BD43","76CADE5A-4C3D-48D9-9131-BBC8D520F858","D6481C13-6A4C-4A54-8EC0-8487BDF0B427","D7461DF1-8F38-490E-9D02-8CCC26724CD7","89F0B6A0-A07D-4FDE-AAD5-7066A1041892","FFC96A3E-A813-452A-97EF-2B9B282C4220","E3E2B40E-6BF2-4589-96B9-91D42BD60CE2","73966151-12D3-4F3B-999B-DCD07EF35FF4","B764A914-B27F-492C-AEC6-8DB2B2248FD0","D3EB0E08-BBA7-4251-94B1-2FD81EBF2C07","3103A126-8548-4D5B-8380-F8895A6CAA4F","4AEA2FE8-C9AD-407B-9EFC-FE294E4E52AC","99158335-6C7B-4EF9-B18B-4E6E609C5CF4","007148CF-1365-4195-BDFB-F9A9391F72F0","1B441072-9FBC-4AD9-B606-BEB7AE279D41","F350CDAF-4160-42E4-A72B-29F578A76A2E","1479FEAA-346C-4E3A-965E-8611C02F06CF","D2D0B539-180C-4798-83E0-499178C42862","7AADC054-3F91-4EA7-BCE6-8392A36DEAFD","D5E5C0DC-E79D-41BA-91FA-910E02AAFDE5","FE4A87B3-2F01-47BA-8313-18216CFDF96C","E2FE8C74-955C-4B1B-8452-0F01744FEEC5","521BA7FB-DC06-4BA4-9B9C-17A787293A29","12F19A45-9C45-426B-9535-19F6289A8DFB"]}

Important: this is just a quick and dirty example to provide an idea how this can be achieved. I am not familiar with JavaScript at all and it would be nice if experienced developers could post here improved versions.

Hope this will help others who stumble across the same problem :-)

Keywords: sortablejs server server-side value-list array

[ghost]

I 2nd this but I'm finding getting the data-id attribute of the element to be quite unclear within the store > set method. See below code:

`

var testLocations = document.getElementById("test-locations");

                    var siteId = "<%=site._id%>";
                    var testId = 0;
                    var sort = Sortable.create(testLocations, {
                        group: "list",
                        animation: 200,
                        dataIdAttr: 'data-id',
                        draggable: '.test-location-drag-target',
                        ghostClass: "ghost",
                        dragClass: "ghost-drag",
                        store: {
                            set: function (sortable) {
                                var order = sortable.toArray();

                                $.ajax({
                                    method: "POST",
                                    url: "/api/" + siteId + "/order-locations",
                                    data: { 
                                        order: order,
                                        testId: testId
                                    }
                                }).done(function(res){

                                }).fail(function(){
                                    console.log('Drag order save fail.')
                                });

                            }
                        },
                    });

`