jQuery Пользовательский интерфейс сортируется без Ajax (отправьте данные заказа, используя обычную форму) - PullRequest
Новая
       5

jQuery Пользовательский интерфейс сортируется без Ajax (отправьте данные заказа, используя обычную форму)

0 голосов
/ 18 февраля 2020

Я использую jQuery Сортируемый пользовательский интерфейс, и я хотел бы отправить заказ элементов, используя обычную форму (поэтому, вместо использования Ajax, я хотел бы иметь форму с кнопкой отправки - когда я отправляю форма, он будет отправлять данные заказа на стороне сервера).

В настоящее время у меня есть: 

<form id="frmExample" method="post">
    <ul id="sortable">
        <li id="task_1" class="ui-state-default">1</li>
        <li id="task_2" class="ui-state-default">2</li>
        <li id="task_3" class="ui-state-default">3</li>
        <li id="task_4" class="ui-state-default">4</li>
    </ul>

    <button id="btnSubmit" type="submit">Submit</button>
</form>

<script>
    $sortable.sortable({
        update: function(event, ui) {
            var $data = $(this).sortable('serialize');

            // now what? :)
        }
    });

    $sortable.disableSelection();
<script>

Возможно, это можно сделать, используя метод сериализации , поскольку в документации указано, что он " сериализует элемент сортируемой идентификаторы в форме / ajax отправляемая строка."... но я не знаю как. Или, может быть, есть лучший способ (без использования метода serialize)?

Обратите внимание, что я хотел бы представить это в виде массива. Например, после отправки в бэкэнде (сторона PHP / Laravel) это будет выглядеть примерно так: 

// Result of $_POST:
// array(
//     'positions' => array('task_3', 'task_2', 'task_4', 'task_1')
// )

1 Ответ

1 голос
/ 18 февраля 2020

Вот базовый пример c, который останавливает отправку формы только для этого примера фрагмента. Ваш код не будет e.preventDefault(). 

$(function() {
  var $sortable = $("#sortable").sortable({
    update: function(event, ui) {
      var $data = $(this).sortable('toArray');
      $("#position").val(JSON.stringify($data));
    }
  });
  $sortable.disableSelection();
  $("#position").val(JSON.stringify($sortable.sortable("toArray")));
  $("#frmExample").submit(function(e) {
    e.preventDefault();
    console.log("Form Submit, position:", $("#position").val());
  });
});
form ul {
  list-style: none;
  padding: 0;
  width: 150px;
}

form ul li {
  padding: .2em;
  margin-bottom: -1px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form id="frmExample" method="post">
  <ul id="sortable">
    <li id="task_1" class="ui-state-default">Item 1</li>
    <li id="task_2" class="ui-state-default">Item 2</li>
    <li id="task_3" class="ui-state-default">Item 3</li>
    <li id="task_4" class="ui-state-default">Item 4</li>
  </ul>
  <input type="hidden" name="position" id="position" />
  <button id="btnSubmit" type="submit">Submit</button>
</form>
...