I am using the Knockout subscribe function. I have 3 combo boxes. Every combo has no data until I select a record from the previous combo (except for the first combo box).
When I select it works well. In the subscribe callback, it correctly gives me the selected value from the combo box.
But when I click the row and want to fire the same callback, it doesn't work.
https://codepen.io/anon/pen/dmpbpe
function UNVViewModel() {
var self = this;
var UNVViewModel = vm;
self.Continent = ko.observableArray([]);
self.Countries = ko.observableArray([]);
self.States = ko.observableArray([]);
self.AllData = ko.observableArray([]);
self.concod = ko.observable();
self.cntrycod = ko.observable();
self.statcod = ko.observable();
self.Load = function() {
$.getJSON('../ProjectAPI/api/Project/Continent', function (data) { self.Continent(JSON.parse(data)); })
$.getJSON('../ProjectAPI/api/Project/Countries ', function (data) { self.Countries (JSON.parse(data));})
$.getJSON('../ProjectAPI/api/Project/States ', function (data) { self.States (JSON.parse(data));})
};
self.AllData = [
{
StateName: "Cairo",
StateCode: 111,
CountryCode: 11,
ContinentCode: 1,
ContinentName: "Africa",
CountryName: "Egypt"
},
{
StateName: "Oran",
StateCode: 112,
CountryCode: 12,
ContinentCode: 1,
ContinentName: "Africa",
CountryName: "Algeria"
},
{
StateName: "Rome",
StateCode: 121,
CountryCode: 21,
ContinentCode: 2,
ContinentName: "Europe",
CountryName: "Italy"
}
];
self.concod.subscribe(function(con) {
if (con == undefined) {
return false;
} else {
$.getJSON(
"../ProjectAPI/API/Project/Countries?ContinentCode=" + con, function(data) { self.Countries(JSON.parse(data));}
).complete(function() {
if (self.Clickedconcod() !== undefined) {
self.concod(self.Clickedconcod());
}
});
}
});
self.cntrycod.subscribe(function(cnty) {
if (cnty == undefined) {
return false;
} else {
$.getJSON(
"../ProjectAPI/API/Project/States?CountryCode=" +self.cntrycod() +"&ContinentCode=" +self.concod,function(data) {self.States(JSON.parse(data));}
).complete(function() {
if (self.Clickedcntrycod() !== undefined) {
self.cntrycod(self.Clickedcntrycod());
}
});
}
});
}
var vm;
$(document).ready(function() {
vm = new UNVViewModel();
vm.Load();
ko.applyBindings(vm);
});
<div>
<select class="styled-select" data-bind="options:Continents,optionsText:'ContinentName', optionsValue:'ContinentCode',optionsCaption:'Select ', value:concod "></select>
<select class="styled-select" data-bind="options:Countries,optionsText:'CountryName', optionsValue:'CountryCode',optionsCaption:'Select ', value:cntrycod "></select>
<select class="styled-select" data-bind="options:States,optionsText:'StateName', optionsValue:'StateCode',optionsCaption:'Select ', value:statcod "></select>
</div>
<table id="myTable">
<thead>
<tr>
<th> Continent Name</th>
<th> Country Name</th>
<th> State Name</th>
</tr>
</thead>
<tbody data-bind="foreach:AllData">
<tr data-bind="click:$parent.CountryClick">
<td data-bind="text:ContinentName"></td>
<td data-bind="text:CountryName"></td>
<td data-bind="text:StateName"></td>
</tr>
</tbody>
</table>
