I have controller init method which initialize autocomplete input in template:
$scope.initAutoCompleteForWorkers = function (id) {
// INIT AUTOCOMPLETE FOR WORKERS
var promise = GlobalHelperService.workersListForAutocomplete();
promise.then(
function(answer) {
// do something
console.log("Answer");
console.log(answer);
console.log("Name" + answer.name);
console.log("Surname" + answer.surname);
//$scope.projectDetail.newWorker = "";
//$scope.projectDetail.newWorkerName = "";
$scope.projectDetail.newWorker = answer;
$scope.projectDetail.newWorkerName = answer.name +" "+answer.surname ;
},
function(error) {
// report something
console.log("Error");
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
},
function(progress) {
// report progress
console.log("Progres");
});
};
This is init method which should returned deffered.resolve after the each select event.
this.workersListForAutocomplete = function (container, options) {
var deferred = $q.defer();
$("#autocompleteWorker").kendoAutoComplete({
dataSource : {
type: "json",
serverFiltering: true,
transport: {
read: function (options) {
console.log("List");
console.log(options.data);
requestParams = {
"entityName": "worker",
"page": 1,
"pageSize": 20,
"filter": options.data.filter,
"sort": [
{
"field": "name",
"ord": "asc"
}
]
};
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "worker/search",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data.results);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
deferred.reject(e);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
}
}
},
//dataTextField: "name",
dataValueField: "id",
template: '#: data.name # #: data.surname #',
filter: "contains",
minLength: 1,
select : function (e) {
console.log("select");
var dataItem = this.dataItem(e.item.index());
console.log(dataItem);
deferred.resolve(dataItem);
}
});
return deferred.promise;
};
Problem is that function(answer) {
is called only for the first time select event. On the second time and more is not answer promise event called (and input is filled by [Object, Object] value).
I found that better solution should be to use a callback or event instead, but i don't know how to do it in right way.
Could somebody tells me, how to do it right?
Thanks for any help.
You can use callback in the following way:
this.workersListForAutocomplete = function (container, options,callback) {
$("#autocompleteWorker").kendoAutoComplete({
dataSource : {
type: "json",
serverFiltering: true,
transport: {
read: function (options) {
console.log("List");
console.log(options.data);
requestParams = {
"entityName": "worker",
"page": 1,
"pageSize": 20,
"filter": options.data.filter,
"sort": [
{
"field": "name",
"ord": "asc"
}
]
};
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "worker/search",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data.results);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
callback(e,null);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
}
}
},
//dataTextField: "name",
dataValueField: "id",
template: '#: data.name # #: data.surname #',
filter: "contains",
minLength: 1,
select : function (e) {
console.log("select");
var dataItem = this.dataItem(e.item.index());
console.log(dataItem);
callback(null,dataItem);
}
});
return deferred.promise;
};
and in your controller:
$scope.initAutoCompleteForWorkers = function (id) {
// INIT AUTOCOMPLETE FOR WORKERS
GlobalHelperService.workersListForAutocomplete(function(err,answer){
if(err){
// report something
console.log("Error");
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
} else {
// do something
console.log("Answer");
console.log(answer);
console.log("Name" + answer.name);
console.log("Surname" + answer.surname);
//$scope.projectDetail.newWorker = "";
//$scope.projectDetail.newWorkerName = "";
$scope.projectDetail.newWorker = answer;
$scope.projectDetail.newWorkerName = answer.name +" "+answer.surname ;
}
});
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.