How do I pass variables to PHP on sort?

Question

I am new to Jquery/Ajax - I'm trying to get the Sortable script to pass the values of some to a PHP script.

I am trying to use this method as it has some nice UI features: https://sortablejs.github.io/Sortable/

Docs: https://github.com/SortableJS/Sortable/blob/master/README.md#toarraystring

I've tried:

var serial = $('#route_list_new').sortable("toArray").val();
var serial = $('#route_list_new').val();
var serial = $("#route_list_new").sortable('serialize');

But i cannot seem to obtain the actual content, i think the error might be somewhere else entirely. (I AM very new to this)

HTML:

---

<div id="route_list_new" class="list-group col sortable-list">
  <div class="list-group-item"><p>Number 1</p></div>
  <div class="list-group-item"><p>Number 2</p></div>
  <div class="list-group-item"><p>Number 3</p></div>
</div>

---

SCRIPT:

---

route_list_new = document.getElementById('route_list_new');
new Sortable(route_list_new, {
    group: 'shared',
    animation: 250,
    onSort: function (event, ui) {
        var serial = $("#route_list_new").sortable('serialize');
        $.ajax({
            data: { serial },
            type: 'POST',
            url: 'sortable.php',
        });
    }
});

I would like the output variable "serial" to =

"Number 1, Number 2, Number 3"

Answer 1

You may simply use this.toArray() .

However, this won't give you the text values of your items, but their data-id attributes instead, as per the docs .

So you should change your items from this:

<div class="list-group-item"><p>Number 1</p></div>

to this:

<div class="list-group-item" data-id="number1"><p>Number 1</p></div>

where number1 uniquely identifies your item (doesn't have to be the same as its text).

 route_list_new = document.getElementById('route_list_new'); new Sortable(route_list_new, { group: 'shared', animation: 250, onSort: function(event, ui) { var sorted = this.toArray(); console.log(sorted); $.ajax({ data: {sorted}, type: 'POST', url: 'sortable.php', }); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> <div id="route_list_new" class="list-group col sortable-list"> <div class="list-group-item" data-id="number1"><p>Number 1</p></div> <div class="list-group-item" data-id="number2"><p>Number 2</p></div> <div class="list-group-item" data-id="number3"><p>Number 3</p></div> </div> 

Answer 2

Simply change:

var serial = $("#route_list_new").sortable('serialize');

To:

var serial = getSerial();

Then add the following function:

function getSerial() {
    let items = $("#route_list_new").find('.list-group-item > p'),
        serial = '';

    $.each(items, function(i, num){
        num = $(num);
        serial += num.html() + ', '
    });

    serial.slice(0,-2);

    return serial
}

If you do a console.log(serial) you will get "Number 1, Number 2, Number 3"