selectize not working with dynamic knockout options binding

Question

I am using knockout.js with jquery. The availableBrands is defined as:

self.availableBrands = ko.observableArray();

my ajax request method is :

self.loadBrands = function () {
                $.ajax({
                    url: '/api/Electronic/GetBrands',
                    dataType: "json",
                    contentType: "application/json",
                    cache: false,
                    type: 'POST',
                    success: function (data) {
                        $.each(data,function (i,item) { self.availableBrands.push(item) });
                    },
                    error: function (jqXHR, status, thrownError) {
                        toastr.error("failed to load Brands.Please refresh page and try again", "Error");
                    }
                });
            }

and data I receiving is:

Update: I am using knockout options binding with selectize plugin as:

<select id="select-category" class="demo-default" data-bind="options: availableBrands,
                       value: selectedBrand,
                       optionsCaption: 'Choose brand...'"></select>

and js is:

$('#select-category').selectize({
                create: true,
                sortField: {
                    field: 'text',
                    direction: 'asc'
                },
            });

Now select shows only those options which I hardcoded. It does not show options loaded through ajax.

Update 2:

In loadBrands function I write self.availableBrands.push('ghi'); and ghi is shown in select options. But the data loaded through ajax is not shown.

I changed ajax success to:

success: function (data) {
                        $.each((data), function (i, item) { console.log(item); });
                    },

and data on console is shown in figure below

Why data loaded through ajax is not shown in select?

Just use $.each($(data),function(). Convert data into jquery object — Guruprasad J Rao
you can directly assign than rather pushing check here jsfiddle.net/LkqTU/26469 . hope that helps — super cool

super cool super cool · Accepted Answer · 2015-09-02T05:55:31

It should work as expected make sure your are referring jquery properly .

viewModel:

var ViewModel = function (data) {
    var self = this;
    self.list = ko.observableArray();
    $.each(data, function (i,item) {
        self.list.push(item)
    });
}
ko.applyBindings(new ViewModel([11, 22, 33]));

check sample here for reference

There is no need to use $.each in your this case check here.

Update using Selectize plugin check here .

Try applying .selectize in ajax success after options are loaded .

selectize not working with dynamic knockout options binding

2 Answers