How to Call a Function on Save

I am using then Kanban board and I would like to trigger a function when I save

Here’s a snippet so it’s easier to read:
https://snippet.webix.com/w355hob0

Here’s the code in the forum in case anyone else is searching for a similar issue:

var kanban = webix.ui({
    view:"kanban", 
    type:"space",
    cols:[
        { header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        },
        { header:"Done",
            body:{ view:"kanbanlist", status:"done" }
        }
    ],
            save:{
                url: "/my/server/1",
                trackMove: true,
               // This is where I would like to call a function

            },
});

I have tried using the attachEvent because I need to send the CSRF token in Laravel.

  webix.attachEvent("onBeforeAjax",
        function(mode, url, data, request, headers, files, promise){
            headers["X-CSRF-TOKEN"] = "{{ csrf_token() }}";
            something();
        }
    );

function something() {
   $.ajax({
             type: "POST",
             url: "/my/server/2",
             headers:
             { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
             data: {
                 filename: filename,
             },
             success: function (file) {
                 console.log('saved' . filename);
             },
             error: function (data, errorThrown)
             {
                 console.log(errorThrown);
             }
         });

That works BUT I end up in a loop because I am also making an ajax request in my function that triggers onBeforeAjax.

I am not sure how to solve it. I like that the “save” is triggered every time anything is changed.

Thanks in advance for your assistance.

calling jQuery ajax should not trigger webix onBeforeAjax event.
if in this case the loop is occurred, then you need to search the problem in other place.
but if you want to call webix ajax and need to prevent the loop, then you can try next scenario

webix.attachEvent("onBeforeAjax", function(..., headers,...){
    if(headers["X-CSRF-TOKEN"])return;//do not process if header is already set;
    headers["X-CSRF-TOKEN"] = "{{ csrf_token() }}";
    something();
})
function something(){
    webix.ajax().headers({
        "X-CSRF-TOKEN":"{{ csrf_token() }}"
    }).post(...)
}

Please note that trackMove is enabled by default for data saving in Kanban since version 6.1(major Kanban update), so it could be omitted.

But I’m afraid the above code will still issue two requests - the original one and POST request from something method.

In order to send data from Kanban with the needed headers, you can specify saving request as a function which should return a promise object (either webix.ajax or a custom one): https://snippet.webix.com/6ygef07o

To modify all Webix requests, please use onBeforeAjax as follows: https://snippet.webix.com/flgckl1e
And truly, I can confirm that it should not be triggered for jQuery request.

Also, if you need to cancel the saving request for some reason, please do not return false from the related method or onBeforeAjax request, as the result of data saving is handled as a promise object.
Instead, you can return a denied promise:

 save: function(id, operation, params){
    // if for some reason request should not be issued   
    return webix.promise.defer().reject();
  }

intregal, thanks so much for your response. I figured out the loop wasn’t due to the ajax based on the comments. For some reason the trackmove sends and update request twice each time I move a card on the kanban board. The request is slightly different. One has a webix_move_parent and one request doesn’t so I incorporated that into my logic to ensure it only triggers my ajax once.

if(params["webix_move_parent"])

Listopad, you’re a GENIUS! I had been pulling my hair out trying to figure out how to do a save function with headers. Thank you so much for your snippet!

I know people desperately search these forums using code snippets. I’m going to put my solution here in case anyone runs into the same issue and you are trying to

1. Create an Ajax Save
2. Pass the csrf-token
3. Your save command appears to be triggered twice each time you move a card.

save:function(id, operation, params){

if(params["webix_move_parent"])) {

  params.operation = operation;
  const source = ""/my/server/2"";
  return webix.ajax().headers({
    'Content-type': 'application/x-www-form-urlencoded',
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }).post(source, params);

} else {
    return webix.promise.defer().reject();
}