Is there a method to refresh/reload the kanban items?

[eazuka]

When a new content that should display on the kanban is saved to db or a content on the kanban is updated, I wand to be able to trigger a function to reload the kanban items so that updated data is displayed.

Is there an available method for this or a know method to get this done?

[marcosrocha85]

Currently the only way to update items is through DOM. You have to get your item and update the "title" with the new DOM. You can also use a reactive framework like React or Vue and update it dinamically.

[Brecht272727]

I have the same issue when editing items, but for now i solved it with location.reload() function after editing. It is not the most elegant way but it works. Maybe there is a better idea without the location.reload(). Something with reloading the container only instead of reloading the whole page?

[luxiusmx]

It's not the best approach, but I hope it helps

var kanban = new jKanban({
    element: '#kanban_div_id',
    gutter: '0'
});

var url="tu_url.php"; // CAMBIAR AQUÍ!!!!!!!!
var boards;
var elementos;

var kanban = new jKanban({
    element: '#id_kanban_div',
    gutter: '0'
});

function agregarBoards() {
  console.log("Obteniendo Boards dinámicamente"); // <<<<<<<-------

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log("Respuesta recibida"); // <<<<<<<-------
        // Obtener los boards transmitidos como un arreglo JSON desde la respuesta
        try {
            boards = JSON.parse(xhr.responseText);
            console.log("JSON válido"); // <<<<<<<-------

              // Agregar los boards a jKanban y resolver la promesa
              console.log("Agregamos Tableros"); // <<<<<<<-------
              kanban.addBoards(boards);
              console.log("Llamamos AgregarElementos"); // <<<<<<<-------
              agregarElementos();

            // Esperar a que se complete la adición de tableros antes de llamar a agregarElementos()

          } catch (error) {
            console.log("JSON no válido"); // <<<<<<<-------
            console.log(error); // <<<<<<<-------
            console.error(error); // <<<<<<<-------
          }
      }
    }
  };
  // Agregar la variable cargarBoards=1 a la petición POST (mi activador, cámbialo a lo que necesites)
  xhr.send("cargarBoards=1");
}
console.log("Llamamos agregar boards"); // <<<<<<<-------
agregarBoards();

function agregarElemento(boardID, id, title) {
  // Crear el objeto element con el id y título proporcionados
  var element = {
    id: id,
    title: title
  };
  console.log(element.id+"|"+element.title); // <<<<<<<-------
  // Agregar el elemento al board correspondiente
  console.log("Agregar elemento: "+boardID+"|"+element); // <<<<<<<-------
  kanban.addElement(boardID, element);
  console.log("Se agregó el elemento"); // <<<<<<<-------
}

function agregarElementos() {
// Realizar la petición POST a maq.php
  console.log("Obteniendo elementos dinámicamente"); // <<<<<<<-------
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log("Respuesta recibida"); // <<<<<<<-------
        // Obtener los boards transmitidos como un arreglo JSON desde la respuesta

        try {
          elementos = JSON.parse(xhr.responseText);
          console.log("JSON válido"); // <<<<<<<-------
        } catch (error) {
          console.log("JSON no válido"); // <<<<<<<-------
        }

        // Iterar sobre los elementos y agregarlos al board correspondiente
        console.log("Iniciamos Carga de "+elementos.length+" elementos"); // <<<<<<<-------
        for (var i = 0; i < elementos.length; i++) {
          console.log("elemento:"+elementos[i]); // <<<<<<<-------
          var elemento = elementos[i];
          agregarElemento(elemento.boardID, elemento.id, elemento.title);
        }

      }
    }
  };
  // Agregar las variables cargarElementos=1  a la petición POST
  console.log("Enviar Petición cargarElementos"); // <<<<<<<-------
  xhr.send("cargarElementos=1");
}

function eliminarBoards() {
  console.log("Eliminar boards"); // <<<<<<<-------
  boards.forEach(function(board) {
    console.log("Eliminamos board "+board.id); // <<<<<<<-------
    kanban.removeBoard(board.id);
  });
}

function recargarKanban() {
  console.log("Recargamos Kanban"); // <<<<<<<-------

  eliminarBoards();
  agregarBoards();

}

[VincentVanWijk]

i do it by simply removing and rebuilding the entire board:

<script>
        kanban(@json($boards));

        function kanban(boards) {
           //remove and re-append board
            $('.kanban-board').remove();
            $('#kanban').append('<div class="kanban-board"></div>');

            new jKanban({
                element: '.kanban-board',       
                gutter: '10px',                
                widthBoard: '250px',         
                responsivePercentage: false,
                dragItems: true,            
                boards: boards,

                //..rest of kanban options