I have a set of cascading drop-down lists that are used to select a home address. We will arrange the address in the following order:
- Street name (e.g. 10, 11, Main)
- Street suffix (e.g. St, Ave)
- Street direction
- Street number (house number)
I use knockout to generate values in dropdown menus that are retrieved from the database via REST requests. It works fine for me, except for one edge.
First, let me tell you a little about addresses (when they are broken down like this). There is always a street name, and there is always a street number. Suffix and direction are not always used. Therefore, I can have 100 Savannah South (Savannah South is the name of the street), or 101 Main St. I have these scenarios suggesting a suffix and a change of direction.
The problem is that when I switch from 10th to 11th. Both of them have only the suffix "Street", and both have only one direction "West". When I make changes, the suffix and direction do not change, which does not cause the corresponding subscribers to pull out the next data set. Therefore, if I change from 10 to 11, house numbers are not updated.
function AddViewModel() { self.StreetName = ko.observable(''); self.StreetNames = ko.observableArray([""]); self.StreetName.subscribe(function (val) { if ((val !== undefined && val !== null && val !== '') && val !== viewModel.StreetType()) { getStreetTypes(val); } }); self.StreetType = ko.observable(''); self.StreetTypes = ko.observableArray([]); self.StreetType.subscribe(function (val) { if (val !== undefined && val !== null && val !== '') { alert("I changed to " + val); getStreetDirections(self.StreetName, val); } }); self.StreetDirection = ko.observable(''); self.StreetDirections = ko.observableArray([]); self.StreetDirection.subscribe(function (val) { if (val !== undefined && val !== null && val !== '') { getStreetNumbers(self.StreetName, self.StreetType, val); } }); self.StreetNumber = ko.observable(''); self.StreetNumbers = ko.observableArray([]); self.StreetNumber.subscribe(function (val, e) { if (val !== undefined && val !== null && val !== '') { $.get('/api/gis/addressview/getaddress', { streetName: $('#StreetName').val(), streetType: $('#StreetType').val(), streetDirection: $('#StreetDirection').val(), streetNumber: val }, function (result) { loadAddresses(result); }, 'json'); } }); }
I tried several things to do jQuery $.trigger('change') in the field that you see above by adding .valueHasMutated() . I could write a detailed code to check if the street name has changed, but there is no suffix and direction, and then reload the street numbers, but I try to stick to the subscription frame if possible.
Can someone point me in the right direction either to run the .subscribe() function, or how to take a different approach?
NOTE. I really can't execute JSFiddle, given that the REST endpoints are on a private network and not publicly available. Otherwise, I would provide one.