CODEWITHSUNDEEP
jqueryknockout.jsknockout-2.0
VAAA
VAAA

Reputation: 15039

KnockoutJS and Jquery how to fill combo dynamically

I have a form that uses 2 combos. The first combo is filled when the form is loaded and the second one is filled from server (ajax) depending on the first combo selection.

Here is the ajax code for filling my supervisors combo:

// here go and get employee supervisors
var cboSupervisor = $('#cboAuthorizer');
cboSupervisor.html('');

$.ajax({
    url: '@Url.Content("~/Employee/GetEmployeeSupervisors")/',
    type: 'POST',
    contentType: 'application/json',
    dataType: "json",
    data: JSON.stringify({
        employeeId: ui.item.employeeId
    }),
    success: function(data) {

        if (data.success) {
            $.each(data.data, function() {
                cboSupervisor.append($("<option />").val(this.SupervisorId).text(this.SupervisorName));
            });
        }
    }
});

I have my knockoutjs model but didn't work the data-bind for this combo and I guess is because of the dynamic loading of the combo.

<select id="cboAuthorizer" class="form-control" data-bind="value: exitPass.authorizer">
</select>

My knockout model looks like this:

var jsonPass = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model.ExitPass, Newtonsoft.Json.Formatting.Indented, jsonSettings));

var ExitPass = function(exitPass) {
    var self = this;

    self.incidentId = ko.observable(exitPass.IncidentId || 0);
    self.employeeId = ko.observable(exitPass.EmployeeId || 0);
    self.employerId = ko.observable(exitPass.EmployerId || 0);
    self.employerDesc = ko.observable(exitPass.EmployerDesc);
    self.employeeNumber = ko.observable(exitPass.EmployeeNumber);
    self.employeeName = ko.observable(exitPass.EmployeeName);
    self.createdByName = ko.observable(exitPass.CreatedByName);
    self.incidentDate = ko.observable(exitPass.IncidentDate);
    self.incidentCode = ko.observable(exitPass.IncidentCode);
    self.incidentCodeDesc = ko.observable(exitPass.IncidentCodeDesc);
    self.incidentTypeId = ko.observable(exitPass.IncidentTypeId || 0);
    self.incidentType = ko.observable(exitPass.IncidentType);
    self.permitType = ko.observable(exitPass.PermitType);
    self.outHour = ko.observable(exitPass.OutHour);
    self.inHour = ko.observable(exitPass.InHour);
    self.place = ko.observable(exitPass.Place);
    self.subject = ko.observable(exitPass.Subject);
    self.securityStaffId = ko.observable(exitPass.SecurityStaffId || 0);
    self.authorizer = ko.observable(exitPass.Authorizer || 0);
    self.notes = ko.observable(exitPass.Notes);
};

Any clue on how can I solve this? Do I have to create an array or something so I can assign that to the combo and get the value binded? Any help is appreciated.

Upvotes: 0

Views: 121

Answers (1)

super cool
super cool

Reputation: 6045

You should be doing like this

View Model:

    var vm=function(){

    this.Combo1Array=ko.observableArray();
    function(exitPass) {
    var self = this;
    //your observable specific to function
    }

    $.ajax({
       //other stuff
       success: function(data) {
       if (data.success) {
        self.Combo1Array(data.data) // fill the observableArray here
           }
         }
       });

    }
ko.applyBindings(new vm());

View:

<select id="cboAuthorizer" class="form-control" data-bind="options:$root.Combo1Array,optionsValue:'SupervisorId',optionsText:'SupervisorName',value:exitPass.authorizer">
</select>

$root or $data anything used based on the scope

options Documentation is clearly given here in ko docs

Upvotes: 1

Related Questions