CODEWITHSUNDEEP
javascriptjqueryajaxcodeigniterknockout.js
bubleh
bubleh

Reputation: 378

Set initial value of select2 ajax with knockout

I have a problem to set initial value of select2 ajax control. I'm using CI and knockout in this case. My code will add one row to table body when pressed and i use select2 ajax in table cell.

My HTML:

<tbody data-bind="foreach: rows">
<tr>
    <td><input name="id_item[]" class="form-control big-drop" type="hidden" data-bind="value: id_item,select2: { minimumInputLength: 1, query: $root.list_item,formatResult: $root.itemFormatResult,formatSelection: $root.itemFormatSelection, allowClear: true}"></td>
    <td><input placeholder="qty" name="qty[]" class="form-control number text-right" data-bind="value: qty,number: qty, numberOptions: {value: true, number_of_comma: 0}, valueUpdate: 'afterkeydown'"></td>
    <td><input placeholder="price" name="price[]" class="form-control number text-right" data-bind="value: price,number: price, numberOptions: {value: true, number_of_comma: 2}, valueUpdate: 'afterkeydown', formatNoMatches: no_match_format"></td>  
    <td><button data-bind="click: $root.removeRow" class="btn btn-danger"><i class="fa fa-minus"></i></button></td>
</tr>
</tbody>

My KO model:

function Row(id_item, qty, price) {
    var self = this;
    self.id_item = ko.observable(id_item);
    self.qty = ko.observable(qty);
    self.price = ko.observable(price);

    ko.computed(function () {
        var item = self.id_item();

        get_satuan(item).done(function (data) {
            if (!isNaN(data.price)){
                self.harga(format_number(data.price, ''));
            }
        });
    });
}

var RowModel = function(rows) {
    var self = this;

    var default_array = ko.observableArray();
    if (detail.length > 0){
        $.each(detail, function(key, value){
            default_array.push(new Row(value.id_item, value.qty, value.price));
        });
    }

    self.rows = default_array;
    self.addRow = function() {
        self.rows.push(new Row('TUT',"","1"));
    };

    self.removeRow = function(row) { self.rows.remove(row) }

    self.list_item = function (query) {
        $.ajax({
            url: 'link to get json',
            type: 'POST',
            dataType: 'json',
            data: {q: query.term},
            success: function (data) {
                query.callback({
                    results: data
                });
            }
        });
    };
    self.itemFormatResult = function(item) {
        var markup = "<table class='movie-result'><tr><td><div class='movie-title'>";
        markup += "<b>" + item.id + "</b>";
        markup += "<br>" + item.item_name;
        markup += "<br>" + item.unit;
        markup += "</div></td></tr></table>";
        return markup;
    }
    self.itemFormatSelection = function (item) {
        return item.item_name;
    };
};

ko.applyBindings(new RowModel());

Everything works well: 1. adding new row 2. selecting item using select2 works fine 3. after selecting item, the price will change based on item selection, works fine

The problem is in this code:

self.addRow = function() {
        self.rows.push(new Row('TUT',"","1"));
};

After setting the value of select2, select2 not displaying the item_name based on itemFormatSelection. Please help me, thanks a lot. Sorry for my bad english

Upvotes: 0

Views: 1604

Answers (1)

bubleh
bubleh

Reputation: 378

Problem solved, I use select2's initSelection to do this. When calling initSelection do an ajax call to get the value in JSON.

This is my JS Code:

self.init_item = function (id_item, callback) {
    var id = $(id_item).val();
    $.ajax({
        url: 'link to get JSON',
        type: 'POST',
        dataType: 'json',
        data: {id: id},
        success: function (data) {
            callback(data);
        }
    });
};

Add this select2 data-bind:

initSelection: $root.init_item

That's all

Upvotes: 2

Related Questions