Call map function on DIV and create array

Question

Situation:

I created a HTML Grid, the div's can be replaced by using jquery sort (drag and drop). Users can change the order of this grid. When the users press the save button function getMapping(); is called.

The function getMapping(); gets the order of the div's by id.

Inside the "map" loop i have created an if/else function to see if the id is an header div or not. When i check the function with console.log i have no errors and receive the correct array data ( console.log(getMapping());

The issue:

When i try to send the created array from getMapping(); trough ajax i receive a error (1). The error only occurs when i try to send variable with Ajax. So the function creates the array correctly but when i trying to send the array to Ajax i receive error (1)

(1) Error on send using ajax: Uncaught TypeError: 'click' called on an object that does not implement interface 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;
}






  
    
      
        
        
      
      
        TEAM 1
        TEAM 2
      
      
        
      
    
  



  
    
      Console log:

user_3877838 · Answer

I have moved my var array out of the map() function which results in Ajax accepting the variable and sending it to 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;
}

Call map function on DIV and create array

1 Answers