riktar / jkanban

Vanilla Javascript plugin for manage kanban boards
https://www.riccardotartaglia.it/jkanban/
Apache License 2.0
1.08k stars 300 forks source link

Fetching data from ajax item drag-drop not working #135

Closed Rampesna closed 3 years ago

Rampesna commented 3 years ago

This is my kanban object,

var kanban = new jKanban({
        element: '#boards',
        gutter: '0',
        widthBoard: '290px',
        dragBoards: true,
        click: function(el) { },
        dropEl: function (el, source) {},
        dragendBoard: function (el) {},
        dragendEl: function (el) { },
        boards: []
    });

I am fetching data with ajax from api and deleting all items in having '.kanban-container' class, and loading kanban boards with this function,

function fetchBoards() {
        $.ajax({
            type: 'get',
            url: '{{ route('api.v1.board.index') }}',
            headers: {
                _token: '{{ auth()->user()->token() }}'
            },
            data: {
                project_id: '{{ @$project->id }}',
            },
            success: function (response) {
                $('.kanban-container').html('');

                var boardsList = [];
                $.each(response.content, function (board) {

                    var taskList = [];
                    $.each(response.content[board].tasks, function (task) {
                        taskList.push({
                            id: response.content[board].tasks[task].id,
                            title: response.content[board].tasks[task].name
                        });
                    });

                    boardsList.push({
                        id: response.content[board].id,
                        title: response.content[board].name,
                        item: taskList,
                        order: response.content[board].order
                    });
                });
                kanban.addBoards(boardsList);
            }
        });
    }

But when i try to drag-drop any board item to another board, system give me an error,

void 0 !== i.dragTo && b.options.boards.map(function (e) { -1 === i.dragTo.indexOf(e.id) && e.id !== t.parentNode.dataset.id && b.findBoard(e.id).classList.add("disabled-board") }), b.options.dragEl(e, t), null !== e && "function" == typeof e.dragfn && e.dragfn(e, t),

To temporarily solve this problem, when defining the kanban, i doing:

boards: [
            @for($boardCounter = 1; $boardCounter <= 100; $boardCounter++)
            {
                'id': '{{ $boardCounter }}',
                'order': '{{ $boardCounter }}',
                'title': '',
                'item': [
                    @for($itemCounter = 1; $itemCounter <= 100; $itemCounter++)
                    {
                        'id': '{{ $itemCounter }}',
                        'order': '{{ $itemCounter }}',
                        'title': ''
                    },
                    @endfor
                ]
            },
            @endfor
        ]

I don't know why but for now it solves my problem but hopefully not more than a hundred boards or tasks.

What is the real problem and how can i fix it?

xscode-auto-reply[bot] commented 3 years ago

Thanks for opening a new issue. The team has been notified and will review it as soon as possible. For urgent issues and priority support, visit https://xscode.com/riktar/jkanban

Rampesna commented 3 years ago

I solved the problem but I don't know what caused the problem,

When i define it this way,

boardsList.push({
    id: response.content[board].id,
    title: response.content[board].name,
    item: taskList,
    order: response.content[board].order
});

not working but when i define it this way its working,

boardsList.push({
    'id': response.content[board].id,
    'title': response.content[board].name,
    'item': taskList,
    'order': response.content[board].order
});