Как передать переменные в PHP при сортировке?

Question

Я новичок в Jquery / Ajax - я пытаюсь получить сценарий Sortable для передачи значений некоторых из них в сценарий PHP.

Я пытаюсь использовать этот метод, поскольку он имеет приятный пользовательский интерфейсОсобенности: https://sortablejs.github.io/Sortable/

Документы: https://github.com/SortableJS/Sortable/blob/master/README.md#toarraystring

Я пробовал:

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

Но я не могу получить фактическое содержание, я думаю, что ошибкаможет быть где-то еще полностью.(Я очень новичок в этом)

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',
        });
    }
});

Я хотел бы получить выводпеременная «серийный» до =

"Number 1, Number 2, Number 3"

Answer 1

Вы можете просто использовать this.toArray().

Однако, это не даст вам текстовые значения ваших предметов, а вместо этого их атрибуты data-id, согласно документам .

Таким образом, вы должны изменить свои предметы с этого:

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

на это:

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

, где number1 однозначно идентифицирует ваш предмет (не имеетбыть таким же, как его текст).

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

Просто измените:

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

На:

var serial = getSerial();

Затем добавьте следующую функцию:

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
}

Если вы сделаете console.log(serial), вы получитеполучить "номер 1, номер 2, номер 3"