Javascript foreach l oop звонит ajax несколько раз - PullRequest
Новая
       2

Javascript foreach l oop звонит ajax несколько раз

1 голос
/ 14 января 2020

Итак, я пытаюсь создать список дел с несколькими досками. На каждой доске есть кнопка добавления предмета. Если я нажимаю кнопку «Добавить элемент», открывается модальное место для вставки информации о задаче. Но если я нажимаю кнопку добавления элемента несколько раз, а затем вставляю информацию в модальный режим и нажимаю кнопку сохранения ajax, срабатывает столько раз, сколько я нажимал кнопку добавления элемента. Как я могу предотвратить это? 

var addNewItems = document.querySelectorAll("#addNewItem");
var addNewSubmits = document.querySelectorAll("#listItemSave");
addNewItems.forEach(function(addNewItem) {
  addNewItem.addEventListener("click", function(e) {
    var newItemModal = this.nextElementSibling;
    newItemModal.classList.toggle("hidden");
    var addNewBtn = newItemModal.querySelector("#listItemSave");
    //current board
    var board = this.closest("div.list");
    //current list
    var list = board.querySelector(".todo--items");

    addNewBtn.addEventListener  ("click", function(e) {
      //current board id
      var boardId = board.dataset.boardid;
      //current title
      var title = newItemModal.querySelector("#listTitle");
      var titleValue = title.value;
      //current content
      var content = newItemModal.querySelector("#listTextarea");
      var contentValue = content.value;


      $.ajax({
        type: "POST",
        url: "add.php",
        data: { content: contentValue , title: titleValue , listid: boardId  },

        success: function(data, textStatus, jqXHR) {

        $("#todoItems-" + id + "").append(data);

       }
      });

    });
  });
});

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Вместо этого вы можете использовать addNewBtn.onclick = function () {} для перекрытия предыдущего слушателя в этом случае. Но не рекомендуется регистрировать слушателей внутри другого слушателя. Попробуйте переместить это оттуда.

0 голосов
/ 14 января 2020

Вы можете использовать переменную, скажем, busy, чтобы проверить, что запрос AJAX еще не выполняется.

Вы можете установить эту переменную в обратном вызове beforeSend AJAx и затем обновил его до false в finally callba c: 

var addNewItems = document.querySelectorAll("#addNewItem");
var addNewSubmits = document.querySelectorAll("#listItemSave");
addNewItems.forEach(function (addNewItem) {
    addNewItem.addEventListener("click", function (e) {
        var newItemModal = this.nextElementSibling;
        newItemModal.classList.toggle("hidden");
        var addNewBtn = newItemModal.querySelector("#listItemSave");
        //current board
        var board = this.closest("div.list");
        //current list
        var list = board.querySelector(".todo--items");

        var busy = false;

        addNewBtn.addEventListener("click", function (e) {
            //current board id
            var boardId = board.dataset.boardid;
            //current title
            var title = newItemModal.querySelector("#listTitle");
            var titleValue = title.value;
            //current content
            var content = newItemModal.querySelector("#listTextarea");
            var contentValue = content.value;

            if (!busy) {
                $.ajax({
                    type: "POST",
                    url: "add.php",
                    beforeSend: () => {
                        busy = true;
                    }
                    data: {
                        content: contentValue,
                        title: titleValue,
                        listid: boardId
                    },
                    success: function (data, textStatus, jqXHR) {
                        $("#todoItems-" + id + "").append(data);
                    },
                    complete: () => {
                        busy = false;
                    }
                });
            }
        });
    });
});

Это довольно простое решение, но оно работает.

...