how to get array of item ids/attrs after making a change?

[cal-zone]

I feel like I'm missing something totally obvious, but for the life of me I can't figure it out.

I have a sortable list. Each item in the list has a unique ID. After the user has changed the list, I'd like to save the new list order in my database. I figured there would be a way to use the onUpdate event to capture the state of the list (either to an input for form submit or a json object to send back to the server via ajax).

The JS events demo page doesn't seem to have an answer for me. But by the same token, I know that sortablejs's "store" functionality means list order tracking is already baked into sortablejs… so… how can I take advantage of it?

[cal-zone]

So, by chance, I noticed this line in the store sample code, which I had copied into my code as a stop-gap to get a feel for state being saved:

var order = sortable.toArray();
And then saw that the comment for it say it's trigger onEnd. Ok, that looked promising.

So I copied that line into my own onUpdate:

			onUpdate: function() {
				console.log( sortable.toArray() );
			}

And (again by sheer chance) it just worked on the first pass. I was wondering what it would say and was shocked to see it listed every last database id.

"How is this possible?" I asked? I guessed it must have been pulling from data-id="x" in each element — because actual IDs are not allowed to be numbers. Which is why I created a data-id attribute. It seemed like great coincidental luck.

But then I reviewed the docs and saw that data-id is included as an example value for dataIdAttr. A fact that escaped my notice when I first started using the library because, unlike all the other options, dataIdAttr is not documented with a comment. I had no clue what that was about or why I might want it. I skipped over it. dataIdAttr is only documented in a the briefest most offhand way toward the end of the docs, under Method:

toArray():String[]
Serializes the sortable's item data-id's (dataIdAttr option) into an array of string.

A bit opaque, on top of brief and glossed over. In two incredibly short and unhighlighted non-heading-ed lines, three super-critical pieces of information are presented:

1. toArray() extracts the sort order of your list.
2. In order for toArray() to work, you need an attribute that dataIdAttr as a parameter can reference in each of your sortables and you should declare this in the setup options.
3. Except you don't have to because "data-id" is the default attribute name and you can just use that without declaring it if you like

All of this hidden within a larger discussion about Methods (note that the docs are singular but the available methods are more than one) where most to all of the rest of them are likely more arcane and less popular than obtaining the final order of sort imposed by the user. Moreover, all of this comes after a long and even more opaque discussion about "Event Object" (with a demo that I found utterly unhelpful. Data overload on the demo). I couldn't make heads or tails about that or what impact it had on standard usage of the Library other than I was convinced that the information I needed was in there somewhere somehow. I mean, it HAS TO be event linked, no? Well, that's how thought of it. You make some changes to the list, you want to record or capture those changes and do something as a result of those changes. That's what events are for! But nope. What I sought was not there. By the time I got to the end of that, My eyes had glazed over.

And then, in particular, right near where one might visually need to be scanning to figure out how to pull out the order of the list there is a very large highlighted callout that references sorting the list and draws my eye away from the important stuff:

Sorts the elements according to the array.

var order = sortable.toArray();
sortable.sort(order.reverse(), true); // apply

Programmatic sorting is not the most pressing feature for a Library whose purpose it is to allow users to manually sort content using drag and drop. I realize this is my opinion and I don't have statistics to back me up. But how often do such lists really require programmatic sorting? That's an entirely different use case. Most data comes sorted from the database or by the web developer to begin with. Refreshing a DOM to initial state is also fairly easy to do without this library. It's a nice feature for sure, and could be leveraged for complex interactions where the sequence in one list depends on that of another when a user makes changes. But… I mean…

And that whole thing is immediately followed by a mention about "save" — which implies all the above is related to working with the local storage. Making it skippable if one is not looking to manage local storage.

Anyway. I realize this is a rant. But it frustrated me. And it could be easily remedied by sprucing up the documentation just a little bit. Maybe I'm unique, but I feel like other people have probably run into this as well.

Fortunately, data-id just works even without my declaring it (since I never did)… because it helped me discover exactly the pressing functionality I needed from this library.

So, that's a wrap. I answered my own question.

[owen-m1]

These are docs, they list every method that is available to the user followed by a description of it, and possibly an example as well for a specific use-case. The order doesn't matter and it isn't meant to be read as a tutorial. But thanks for the feedback about the options documentation, I will add a comment beside that option 👍

[GregIsJustDucky]

Hello owen-m1. Seems to me that in all the examples, I've never seen the way on how to recover the final sequence of the list on how it was re-ordered. I'm not an expert in Java and CSS, but I can definitely jab at it. But everything I write code for is using classic asp. Can you give me an example of how I can sort a table using this software, then click a submit button to finalize order and recover the sequence that I can see in classic asp? I'm sure it's simple, but I'm just not seeing how to recover the data.

Thanks so much.

[lanzer]

I too, find it baffling that for most devs, the reason to use this library would be to collect the reordered list and save it on the server side for processing, but none of the example mention what's the most effective way of doing this. The doc can really benefit from a few real world examples that focus on data handling.

As for Ducky's question, I had the store->set function store the sorted list in a hidden div, and when I submit, the function just read the html of the hidden div and post the values to my api. There's probably a more efficient way of doing this.

[mynona]

I would also strongly recommend to include in the documentation how to retrieve an updated order in order to store it on the server for example:

#2169