By Martynas Treigys


2020-01-14 13:08:18 8 Comments

So I am trying to create to do list with several boards. Each board have add item button. If I click add item button it opens modal where to insert task info. But if I click add item button several times and then insert info to modal and press save ajax fires as many times i clicked add item button. How can I prevent from that?

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 comments

@Zmen Hu 2020-01-14 13:24:30

You can use addNewBtn.onclick = function () {} instead to overlap the previous listener in this case. But it's not recommended to register listeners inside another listener. Try to move it out of there.

@Nicolas 2020-01-14 13:14:27

You could use a variable, lets say busy, to validate that an AJAX request isn't already on going.

You could set this variable in the beforeSend callback of AJAx and then updated it back to false in the finally callbac :

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

This is a pretty simple solution but it works.

@Martynas Treigys 2020-01-14 13:31:34

for some reasons this solutions doesn't work for me.

@Nicolas 2020-01-14 13:32:26

@MartynasTreigys I havn't testing this , there a good chance you can't simply copy and paste it into your code. however, you should try to understand what i did and apply it to you own context.

Related Questions

Sponsored Content

20 Answered Questions

[SOLVED] Using async/await with a forEach loop

25 Answered Questions

[SOLVED] How to loop through a plain JavaScript object with the objects as members?

  • 2009-05-28 16:18:14
  • edt
  • 1693962 View
  • 1607 Score
  • 25 Answer
  • Tags:   javascript

13 Answered Questions

[SOLVED] Stop setInterval call in JavaScript

23 Answered Questions

[SOLVED] How to make an AJAX call without jQuery?

  • 2011-12-19 20:27:46
  • discky
  • 708596 View
  • 798 Score
  • 23 Answer
  • Tags:   javascript ajax

39 Answered Questions

[SOLVED] Loop through an array in JavaScript

44 Answered Questions

[SOLVED] JavaScript closure inside loops – simple practical example

41 Answered Questions

[SOLVED] How do I loop through or enumerate a JavaScript object?

34 Answered Questions

[SOLVED] How do you get the index of the current iteration of a foreach loop?

  • 2008-09-04 01:38:39
  • Matt Mitchell
  • 924273 View
  • 950 Score
  • 34 Answer
  • Tags:   c# foreach

32 Answered Questions

[SOLVED] How to manage a redirect request after a jQuery Ajax call

Sponsored Content