antonyboom antonyboom - 3 months ago 23
Javascript Question

Twice firing with external filtering in angular ui-grid

I have finished this issue, however, I am faced with the problem of a weird triggering of applied filters. Let me try to explain to you. The first filter request looks like:

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7 OPTIONS 200 xhr angular.js:11881 505 B 17 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7 GET 200 xhr Other 15.3 KB 92 ms


We have options and we have get, it is fine. Next we apply the second filter and request looks like:

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7 GET 200 xhr angular.js:11881 15.3 KB 94 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 OPTIONS 200 xhr angular.js:11881 505 B 21 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 GET 200 xhr Other 15.8 KB 48 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7 OPTIONS 200 xhr angular.js:11881 505 B 22 ms


For some reason the request fired twice. Next we apply the third filter and the request looks like:

?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 OPTIONS 200 xhr angular.js:11881 505 B 18 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231;statusId==5 OPTIONS 200 xhr angular.js:11881 505 B 19 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231 GET 200 xhr Other 15.8 KB 43 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7;studyId==231;statusId==5 GET 200 xhr Other 1.1 KB 27 ms
?$orderby=id-&pageSize=25&pageNbr=1&$filter=eventTypeId==7 GET 200 xhr Other 15.3 KB 95 ms


And we can see how the request fired twice again but in the final it sends one more additional request with only the first filter.

Can anybody explain to me where my mistake is? Thanks in advance.
My code for filters:

gridApi.core.on.filterChanged( $scope, function() {
// Declare vars
var grid = this.grid;
var columns = grid.columns;
$scope.columnTitle = grid.columns[1].filters[0].term;
$scope.columnDesc = grid.columns[2].filters[0].term;
var columnType = grid.columns[3].filters[0].term;
var columnStudy = grid.columns[4].filters[0].term;
var columnPriority = grid.columns[5].filters[0].term;
var columnSeverity = grid.columns[6].filters[0].term;
var columnStatus = grid.columns[7].filters[0].term;
var columnCreatedDate = grid.columns[8].filters[0].term;
var columnModifiedDate = grid.columns[9].filters[0].term;

// Create request for selectable filters
var query = [];
var string;
function request (id, param) {

if(param === "title==" || param === "description=="){
query.push(param + "*" + id + "*")
} else {
query.push(param + id);
}

if (query.length <= 1){
return query
} else {
string = query.join(";");
return string;
}
}

// Define behavior for cancel filtering
$scope.isfilterclear = true;

angular.forEach(columns, function( col ) {
if(col.filters[0].term){
$scope.isfilterclear = false;
}
});
if($scope.isfilterclear) {
$timeout(function() {
$rootScope.refresh()
},500);
}

// Filter behavior for columns
if($scope.columnTitle) {
$scope.$watch('columnTitle', function (newVal, oldVal) {
// filterOptions.filterParam = 'title==*' + newVal + "*";
filterOptions.filterParam = request(newVal, 'title==*');
}, true);
getData()
}
if($scope.columnDesc) {
$scope.$watch('columnDesc', function (newVal, oldVal) {
// filterOptions.filterParam = 'description==*' + newVal + "*";
filterOptions.filterParam = request(newVal, 'description==');
}, true);
getData()
}
if(columnType) {
filterOptions.filterParam = request(columnType, 'eventTypeId==');
getData();
}
if(columnStudy) {
filterOptions.filterParam = request(columnStudy, 'studyId==');
getData();
}
if(columnPriority) {
filterOptions.filterParam = request(columnPriority, 'priorityId==');
getData();
}
if(columnSeverity) {
filterOptions.filterParam = request(columnSeverity, 'severityId==');
getData();
}
if(columnStatus) {
filterOptions.filterParam = request(columnStatus, 'statusId==');
getData();
}
if(columnCreatedDate){
filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
getData()
}
if(columnModifiedDate){
filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
getData()
}


});

Answer

You are calling getData() inside each column filter, that's why your request firing two or more times. Take out your function like this:

 // Filter behavior for columns
                if($scope.columnTitle) {
                    $scope.$watch('columnTitle', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'title==*');
                    }, true);
                }
                if($scope.columnDesc) {
                    $scope.$watch('columnDesc', function (newVal, oldVal) {
                        filterOptions.filterParam =  request(newVal, 'description==');
                    }, true);
                }
                if(columnType) {
                    filterOptions.filterParam = request(columnType, 'eventTypeId==');
                }
                if(columnStudy) {
                    filterOptions.filterParam = request(columnStudy, 'studyId==');
                }
                if(columnPriority) {
                    filterOptions.filterParam = request(columnPriority, 'priorityId==');
                }
                if(columnSeverity) {
                    filterOptions.filterParam = request(columnSeverity, 'severityId==');
                }
                if(columnStatus) {
                    filterOptions.filterParam = request(columnStatus, 'statusId==');
                }
                if(columnCreatedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                }
                if(columnModifiedDate){
                    filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
                }

                getData();