How can I get callback function in Bootstrap dual listbox on select event?

Question

I am kind of new to front end development. I am using this [demo] Bootstrap DualListbox in my code. When I am moving one(or multiple) items from one list to another, I need to save them to database first. If DB operation successfully performed then and then only that items should get moved to another list.

How can I do that ? I think there must be some callback function present in this library but couldn't find one.

Any help is appreciated.

Answer 1

First, my advice is using another library: http://crlcu.github.io/multiselect/ I use in our code, and shows self very well.

Second, if you prefer to use Bootstrap DualListBox, its trigger onchange event, but only on first one select element.

Code: https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox/blob/master/src/jquery.bootstrap-duallistbox.js#L44

So, if you want to use callback, just add calback right after initialising dualbox (runs also in examples page):

$('.demo2').bootstrapDualListbox();
$('.demo2').on('change',function(){
    console.log('triggers');
})

UPD: Only way to check and do actions before actually change elements status is doing things inside library code.

Look at line 208: https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox/blob/master/src/jquery.bootstrap-duallistbox.js#L208

You may create function actuallyMove(), copy here contents of move() function, and clear move() function with you own code.

You own code must check actions, and after that run move().

Also, do this with moveAll function.

Maybe better way is updating API of this library and contribute changes with pull request (in this way move() function must call something like this.onbeforechange and checking result for true or false).

Answer 2

Use external listener. Lets configure this for select with class dual.

Firstly we append configuration of package.

$('select.dual').bootstrapDualListbox({
    selectorMinimalHeight: 160
});

Next we forget about this package and set our own listener.

$('select.dual').on('change',function (e) {
    console.log($(this).val());
})

I we want see changes we can buffer state of this.

var lastState = $('select.dual').val();

$('select.dual').on('change',function (e) {
    var newState = $(this).val();                     
    console.log(lastState);                        // selected before
    console.log(newState);                         // selected now
    console.log($(lastState).not(newState).get()); // removed elements
    console.log($(newState).not(lastState).get()); // added elements
    lastState = newState;
})