I am encountering an issue with fetching data from a restful wcf service during page load and binding it to a dropdown, which is not functioning as expected.
function CreateItem(name, value) {
var self = this;
self.itemName = ko.observable(name);
self.itemValue = ko.observable(value);
};
function AppViewModel() {
var self = this;
self.titleList = ko.observableArray();
self.load = function () {
alert("click fired");
$.ajax({
url: "https://mydomain/RestfulService/Service1.svc/CreateData?name=venkat",
type: "POST",
cahce: false,
async: false,
data:'',
dataType: "jsonp",
success: function (data) {
for (var i = 0; i < data.length; i++) {
self.titleList().push(new CreateItem(data[i].Description, data[i].TitleID));
}
alert("success " + data);
},
error: function (error) {
alert("failed " + error);
}
});
};
};
<div>
<select data-bind="options: titleList(), optionsText: 'itemName', optionsValue: 'itemValue', value: selectedTitleValue, optionsCaption: 'Please choose'"></select>
</div>
<script type="text/javascript">
$(document).ready(function() {
var model = new AppViewModel();
model.load();
ko.applyBindings(model);
});
</script>
The problem lies in the fact that although the knockout array is populating correctly within the load function, the drop down does not reflect the updated data. I am struggling to identify the root cause of this issue. Any insights or suggestions would be greatly appreciated.