Knockout JS and Chosen multiselect not working

Question

I'm using knockout js and the chosen plugin (https://github.com/harvesthq/chosen) to try and make a good looking multi select.

I've tried various ways but can't get the multiselect to work with the data I'm using. When I click on the multiselect, no values are shown even though the options binding contains the correct data.

HTML:

<select multiple="multiple" data-bind="options: allCustomers, 
selectedOptions: event().customers, optionsText: 'name', 
optionsValue: 'id', chosen: true " ></select>

Simplified version of the view model:

    function Event()
    {
        this.customers = ko.observableArray();
    };                     

    //for chosen plugin
    ko.bindingHandlers.chosen = {
        update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
            $(element).chosen();
        }
    }

    function ViewModel()
    {   
        this.event = ko.observable(new Event());
        this.allCustomers = ko.observableArray();
    };

    var viewModel = new ViewModel();

    $.getJSON("/get_json", function(data) 
    {                                  
        for (var c = 0; c < data.customers.length; c++)
        {
            viewModel.allCustomers.push(data.customers[c]);
        }   
    });

    ko.applyBindings(viewModel);

PHP:

function get_json()
{
    $eventData = array(
        'customers' => array(array('name' => 'Bob', 'id' => 1), array('name' => 'John', 'id' => 2)),
        'moreData' => array(),
        'evenMoreData' => array()
        );

    echo json_encode($eventData);
}

This shows the chosen styled select box but when I click in it, no options appear.

When I create a local JS array in the view model for the customers and pass that into allCustomers, the multiselect works correctly (see my jsfiddle) so it's something to do with getting data from the server, but I've been staring at this a while and can't see the problem!

Any help much appreciated

If you `console.log()` the array, it matches the local test version? You have no javascript errors on the page? — Kyeotic, Jul 06 '12 at 20:39
Correct, no errors and the array matches the local test version. — peacemaker, Jul 06 '12 at 20:45
It could be that the async call starts, then the bindings are applied, then the async returns and pushes to the viewmodel. When I push new customers into the array, they aren't showing up in the select, which tells me the chosen update isn't working after the initial binding. — Kyeotic, Jul 06 '12 at 20:51

score 16 · Accepted Answer · answered Jul 06 '12 at 20:56

16

I found the problem after @Tyrsius suggested it might not be updating the data after the initial binding.

I added $(element).trigger("liszt:updated"); to the custom binding like so:

ko.bindingHandlers.chosen = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)  {
        $(element).chosen();
        $(element).trigger("liszt:updated");
    }
}

answered Jul 06 '12 at 20:56

peacemaker

2,541
3
27
48

3

Just wanted to say BIG THANKS for this answer! – Konstantin Sep 14 '12 at 10:35
3

I tried this with knockout 3.0. The problem is that this gets triggered once, when the binding is initiated. Pushing items into an array does not trigger this binding to update. I'm wondering if that's because of Knockout optimization or I'm doing something wrong. Can you post an example of how to use this binding ? – kubal5003 Feb 21 '14 at 00:24
what is listzt? – Gavindra Kalikapersaud Dec 01 '16 at 16:58
@coder Old question, but see here for answer: https://stackoverflow.com/a/18852516/484072 – peacemaker May 23 '17 at 15:22

score 1 · Answer 2 · answered Feb 21 '14 at 18:11

1

The code in the accepted version for some reason did not work for me. Probably because the liszt:updated command does not trigger chosen to be updated. Based on docs here I wrote my own version:

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).chosen({ width: "95%", placeholder_text_multiple: "Select..." });
        var value = ko.unwrap(valueAccessor());
    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.unwrap(valueAccessor());
        $(element).trigger("chosen:updated");

    }
}

answered Feb 21 '14 at 18:11

kubal5003

7,186
8
52
90

Yep, Chosen changed to use `chosen:updated` instead. See https://stackoverflow.com/a/18852516/484072 – peacemaker May 23 '17 at 15:23
That works kind of half way @kubal5003 for me.. 1) With that custom binding, the chosen dropdowns are initialized, and have the placeholder set.. 2) Selecting values from my dropdowns updates the viewmodel. BUT updating the viewmodel (for example a by a select all button) does not update the chosen box.. (like the options aren't shown to be selected). Can you please suggest what I might be missing? – Ren Sep 12 '18 at 06:36

Knockout JS and Chosen multiselect not working

2 Answers2