Board items not updating?

[youradds]

Hi,

I'm trying to understand why this doesn't work. So basically, I have 3 boards. The first board has 3 items in. In my function I have these callbacks:

                dragendBoard: function(el) {
                  updateSortOrders();
                },
                dragendEl: function(el) {
                  updateSortOrders();
                }

Then this function that gets called:

function updateSortOrders() {
  console.dir({ setup: KanbanTest.options.boards });
}

The issue is that for some reason KanbanTest.options.boards remains the same output, even when I have moved items?

This is how it looks when we init the page: https://ibb.co/WfmCYXh This is what I see in updateSortOrders() with the dump: https://ibb.co/GRksjF1 Here is how it looks after I move one item into another slide: https://ibb.co/Y2j3pKn

The problem is that the dump of the boards looks exactly the same (i.e the entry hasn't been moved into the 2nd one).

Am I missing something?

Thanks!

Andy

[riktar]

Hi @youradds KanbanTest.options.boards contains the static initial boards that you have passing to the constructor, it's not updating.

You must use your structure for tracking the updates of all the boards.

[youradds]

Ah balls - I thought it was updated after each change :( Thats a pain. So basically I can't use that for what I need then - as it needs to be updated . It just feels really messy having to grab it from the DOM every time we make a change :/

console.dir(cards);

  cards.forEach(function (card, index) {

    // console.log("FOO: " + card.getAttribute("data-id")+ " and sort " + card.getAttribute("data-order"));
    // get each of the elements in this one...
    var allEle = KanbanTest.getBoardElements(card.getAttribute("data-id"));
    var i = 0;
    allEle.forEach(function(item, index) {
      console.log(item);

      i++; // so we can track the sort order

      var theContents = item.innerHTML;
      theContents = theContents.replace("<div class=\"item_handle drag_handler\"><i class=\"item_handle drag_handler_icon\"></i></div><div>","");
      theContents = theContents.replace("</div>","");

      //console.log("CONTENTS: " + theContents)

      updatesToSend.push({ cat_id: item.getAttribute("data-eid"), sort_order: i, contents: theContents })

    });

  });

[riktar]

Sorry, jkanban not support it! :( Pull Request are welcome! ;)

[youradds]

:( Thanks for the quick response though.

Unfortunately, I'm good at using modules, but not so much at editing them / making forks :) So I'll just have to make do with the other method I had.

[youradds]

Just as an update - below is the code I managed to get working - just in case its useful to someone in the future :)

  var boards = Array.from(document.querySelectorAll(".kanban-container .kanban-board"));

  var updatesToSend = new Array();

  boards.forEach(function (board, i) {

    console.dir( { board: board });

    // get the board id and title 
    var board_id = board.getAttribute("data-id");
    var board_title = document.querySelectorAll(`.kanban-board[data-id="${board_id}"] .kanban-title-board`)[0].innerHTML;

    // get each of the elements in this one...
    var allEle = KanbanTest.getBoardElements(board_id);
    var the_items = new Array();
    allEle.forEach(function(item, i_item) {

      var theContents = item.innerHTML;
      theContents = theContents.replace("<div class=\"item_handle drag_handler\"><i class=\"item_handle drag_handler_icon\"></i></div><div>","");
      theContents = theContents.replace("</div>","");

      the_items.push({ sort_order: i_item+1, contents: theContents });

    });

    updatesToSend.push({ board_id: board.getAttribute("data-id"), board_title: board_title, sort_order: i+1, items: the_items });

  });

  var the_setup = JSON.stringify(updatesToSend);

This includes the boards (in their current order), and then the items also in their order. I then send this to our server, and do the magic on there in terms of updating the records