Вызовите функцию карты в DIV и создайте массив

Question

Ситуация:

Я создал HTML сетку, div можно заменить с помощью сортировки jquery (перетаскивание). Пользователи могут изменить порядок этой сетки. Когда пользователи нажимают кнопку сохранения, вызывается функция getMapping();.

Функция getMapping(); получает порядок div по идентификатору.

Внутри «карты» l oop i создали функцию if / else, чтобы узнать, является ли идентификатор div заголовка или нет. Когда я проверяю функцию с помощью console.log, у меня нет ошибок и я получаю правильные данные массива (console.log(getMapping());

Проблема:

Когда я пытаюсь отправить Созданный массив из getMapping(); через ajax я получаю сообщение об ошибке (1). Ошибка возникает только тогда, когда я пытаюсь отправить переменную с Ajax. Таким образом, функция создает массив правильно, но когда я пытаюсь отправить массив в Ajax я получаю ошибку (1)

(1) Ошибка при отправке с использованием ajax: Uncaught TypeError: 'click' вызван для объекта, который не реализует интерфейс HTMLElement.

$(".dropzone").sortable({
  connectWith: ".dropzone",
  update: function(event, ui) {
    showResult();
  },
  placeholder: "dashed"
});

var headerCount = 1;

function addHeader() {
  $(".dropzone").prepend(
    $("#prefab-header")
    .clone()
    .attr("id", "header-" + headerCount)
    .html("Header " + headerCount++)
  );
}

function showResult() {
  var arr = $(".dropzone > div").map(function() {
    return this.id;
  });
  $("#result").html("");
  $("#result").append(arr.get().join(", "));
}

function getMapping() {
  var sort = 1;
  var data = $(".dropzone > div").map(function() {
    var array = [];
    var add = {};
    if (this.id.includes("head-")) {
      add["data"] = 0;
      add["name"] = this.innerText;
      add["sort"] = sort++;
      array.push(add);
    } else {
      add["data"] = this.id;
      add["sort"] = sort++;
      array.push(add);
    }
    return array;
  });
  return data;
}

function sendAjax() {
  var data = getMapping();
  console.log(data);
  /*
  $.ajax({
    url: "cal-admin.php",
    type: "post",
    data: { data: data },
    success: function (response) {}
  });
  */
}

.grid-view {
  margin-top: 50px;
  width: 700px;
  background-color: #f5f2f2;
  padding: 50px;
  min-height: 350px;
}

.grid-trash {
  margin-top: 20px;
  width: 700px;
  background-color: #f5f2f2;
  color: #999;
  padding: 10px;
  height: 50px;
  padding: 10px;
  border: 2px dashed #999;
  text-align: center;
}

.grid-trash-hover {
  background-color: #f34541;
  color: #fff;
  border: 2px dashed #fff;
}

.grid-result {
  margin-top: 20px;
  width: 700px;
  background-color: #f5f2f2;
  padding: 10px;
  height: 100px;
}

.grid-users {
  background: #f5f5f5;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-right: 0px;
  padding-left: 0px;
  cursor: move;
  border: #000 1px solid;
  text-align: center;
  font-weight: bold;
}

.grid-header {
  background: #34bdeb;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-right: 0px;
  padding-left: 0px;
  cursor: move;
  border: #000 1px solid;
  text-align: center;
  font-weight: bold;
}

.dashed {
  border: 2px dashed #999;
  background: #ede8e8;
  height: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container ">
  <div class="row justify-content-center align-items-center">
    <div class="grid-view">
      <div style="padding-bottom: 10px">
        <button type="button" class="btn btn-primary" onclick="addHeader();">Add header</button>
        <button type="button" class="btn btn-info" onclick="showResult();">Display DIV id order</button>
      </div>
      <div id="dropzone" class="dropzone">
        <div id="team-1" class="grid-users">TEAM 1</div>
        <div id="team-2" class="grid-users">TEAM 2</div>
      </div>
      <div style="margin-top: 20px">
        <button type="button" class="btn btn-info" onclick="sendAjax();">Send Ajax</button>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row justify-content-center align-items-center">
    <div class="grid-result">
      <span><b>Console log:</b></span>
      <div id="result" style="height: 50px; padding: 10px; border: 2px dashed #999"></div>
    </div>
  </div>
</div>

<div style="display:none">
  <div id="prefab-header" class="drag grid-header"></div>
</div>

Answer 1

Я переместил свой var array из функции map(), в результате Ajax принимает переменную и отправляет ее на PHP.

function getMapping() {
    var sort = 1;
    var arr = $("#dropzone > div").map(function () {
        return this.id;
    });

    var array = [];
    for (const a of arr) {
        var add = { };
        console.log(a)
        if (a.includes('head-')) {
            add['data'] = 0;
            add['sort'] = sort++;
            array.push(add);
        } else {
            add['data'] = a.id;
            add['sort'] = sort++;
            array.push(add);
        }
    }
    return array;
}