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.

@Martynas Treigys 2020-01-14 13:45:13

It works!!! thank you!

Related Questions

Sponsored Content

43 Answered Questions

[SOLVED] Loop through an array in JavaScript

39 Answered Questions

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

32 Answered Questions

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

18 Answered Questions

[SOLVED] Using async/await with a forEach loop

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
  • 837750 View
  • 881 Score
  • 34 Answer
  • Tags:   c# foreach

12 Answered Questions

[SOLVED] Stop setInterval call in JavaScript

44 Answered Questions

[SOLVED] JavaScript closure inside loops – simple practical example

22 Answered Questions

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

  • 2011-12-19 20:27:46
  • discky
  • 676573 View
  • 757 Score
  • 22 Answer
  • Tags:   javascript ajax

21 Answered Questions

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

  • 2009-05-28 16:18:14
  • edt
  • 1610177 View
  • 1550 Score
  • 21 Answer
  • Tags:   javascript

Sponsored Content