tokenize:dropdown:fill not working with ajax event.

[anandperumalla]

Hi !

I am working to populate multi select box with ajax call. I integrated with Tokenize2 library. https://dragonofmercy.github.io/Tokenize2/events.html tokenize:dropdown:fill event was not working as expected. Please find my sample code snippet below.

Help is much appreciated. jQuery('.tokenize-source-demo-2').tokenize2({ placeholder: 'Please add users', dataSource: function(term, object123){ var $this = jQuery('.tokenize-source-demo-2').data('tokenize2'); //console.log($this); //console.log(object123); jQuery.ajax('/api/getActiveUsersList', { data: { matchName: term}, dataType: 'json', success: function(data){ var $items = []; jQuery('.tokenize-source-demo-2').tokenize2().trigger('tokenize:dropdown:clear'); jQuery.each(data.data, function(k, v){ $items.push(v); }); console.log($items); jQuery('.tokenize-source-demo-2').tokenize2().trigger('tokenize:dropdown:show'); object123.trigger('tokenize:dropdown:fill', [$items]); } }); } });

object123, jQuery('.tokenize-source-demo-2').tokenize2() both are not working with trigger event.

Note: I checked with multiple browsers, the issue exist in all the browsers.

Thanks, Anand Kumar P.

[dragonofmercy]

Try with the code below

$('.tokenize-source-demo-2').tokenize2({
    dataSource: function (term, object) {
        $.ajax('/api/getActiveUsersList', {
            type: 'POST',
            data: { matchName: term },
            dataType: 'json',
            success: function (data) {
                var $items = [];
                object.trigger('tokenize:dropdown:clear');
                $.each(data, function (k, v) {
                    $items.push(v);
                });
                object.trigger('tokenize:dropdown:show');
                object.trigger('tokenize:dropdown:fill', [$items]);
            }
        });
    }
});

$('.tokenize-source-demo-2').on('tokenize:tokens:added', function (e, value) {
    console.log(value);
});

[anandperumalla]

Thanks for your quick response. Still I am getting the empty suggestions. : (

jQuery('.tokenize-source-demo-2').tokenize2({ placeholder: 'Please add users' });

with this example, the suggestions are showing correctly. But my requirement is to get the data through API call only.

I can see the $items correctly with the console. Do you know where else might be the problem ?

Thanks, Anand Kumar P.

[anandperumalla]

Is there a way to debug more after triggering the event ?

[dragonofmercy]

Can you add just after "success: function (data) {", console.log(data) and give me the raw content of data

[anandperumalla]

{"success":true,"message":"Success","status":null,"data":{"api_user":"api_user api_user@user_portal "},"message_level":"status"}

This is raw api response, in this I am again reading data.data to loop through.

[dragonofmercy]

OK I see the problem your code is not adapted for that change like below

$.each(data.data, function (k, v) {
    $items.push(v);
});

or

$.each(data.data, function (k, v) {
    $items[k] = v;
});

[anandperumalla]

Nope, I have adapted this. Please see the added code snippet in the firth thread.

[dragonofmercy]

Ok I think I found the problem. Try this:

$.each(data.data, function (k, v) {
    var tmp = [];
    tmp['text'] = v[1].replace('<', '&lt;').replace('>', '&gt;');
    tmp['value'] = v[0];
    $items.push(tmp);
});

The dropdown items must have "text" and "value" field, if your api return an other format, you have to remap the fields like above.

[anandperumalla]

seems no problem with data. Do you have some sample(static) list items to check ? I tried manually defining the $items list to populate. But of no use.

I suspect object.trigger('tokenize:dropdown:fill', [$items]); this is where the problem was. Please find the attached screen shot for added string data.