JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Select Service</label>
<select class="form-control" data-bind="options : serviceList, value :selectedService, optionsText : 'serviceName', optionsValue : 'serviceId'"></select>
</div>
</div>
</div>
JavaScript
function sendAjaxRequest(url, type, data, successCallbackFunction, errorCallbackFunction) {
$.ajax({
url: url,
type: type,
data: JSON.stringify(data),
datatype: "json",
processData: false,
contentType: "application/json; charset=utf-8",
async: false,
success: successCallbackFunction,
error: errorCallbackFunction
});
}
function ServiceOverviewViewModel() {
this.testObservable = ko.observable();
this.serviceList = ko.observableArray([]);
this.selectedService = ko.observable();
var self = this;
this.testFunction = function() {
console.log('Called from Ajax Success callback');
};
this.getServiceList = function() {
// Following is a Test URL. In my application, the URL I use returns me list of objects.
sendAjaxRequest("https://httpbin.org/get", "get", null, this.getServiceListSuccess, this.getServiceListError);
};
this.getServiceListSuccess = function(response) {
// The following line gives me error as 'this.testFunction is not a function'
self.testFunction();
};
this.getServiceListError = function(response) {
};
// On Load, send the ajax call
this.getServiceList();
}
var serviceOverviewViewModel = new ServiceOverviewViewModel();
ko.applyBindings(serviceOverviewViewModel);