Implementing infinite-scrolling in AngularJs involves a function that is triggered after a successful AJAX call. This call occurs when:
- The user reaches the end of the screen.
- The user applies filters and presses the "Search" button.
If it's the first case, the data retrieved from the AJAX call is added to the existing list. If it's the second case, the goal is to clear any existing data in the list and show only the new data. The code snippet for this scenario looks like this:
$scope.successCallBack=function(data){
$('#spn-model-buffering-image').hide(); //hides the loading spinner icon
if($scope.providersList === null) {
$scope.providersList = []; /* initialize if null */
}
if($scope.scrolled === 'true'){
/*If it was a scroll-end event, then simply append the new data to the existing one*/
Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist)); //appends the new data
}
else{
/*If the user clicks on the "Search Providers" button, fetch new data and display it in the entire list view*/
$scope.providersList=[];
$scope.providersList=JSON.parse(data.serviceproviderlist);
}
viewToBeDisplayed(LIST_VIEW);
$scope.scrolled='true';
}
After a successful AJAX call, the described method is activated. It hides the buffering image and checks if the variable "scrolled" is set to true. If true, it indicates a scroll event where data needs to be appended. If false, it means the user has clicked the button, and fresh data should be displayed.
This is the function called upon button-click event:
$scope.getFilteredData=function(){
$scope.scrolled='false';
$scope.getMoreData();
}
The problem faced is that the view does not update despite receiving JSON data from the AJAX call. Data are successfully fetched and appended during the scroll-event.
Could someone offer suggestions on what might be going wrong? Thank you!
Here is the AJAX call code snippet:
$scope.getMoreData=function(){
$('#spn-model-buffering-image1').show(); //loading spinner shown while fetching data
$scope.updateAjaxData(); //updates AJAX data: pagekey, category, and reftag
var url=$scope.getURL();
A.ajax(url, {
method: 'post',
params: AJAX_DATA,
success: function(data, s, x) {
$scope.successCallBack(data);
},
error: function(xhr, statusText, errorThrown) {
$scope.errorCallback(xhr);
}
});
}