CODEWITHSUNDEEP
angularjsionic-frameworkinfinite-scroll
noor
noor

Reputation: 681

Infinite Scrolling reloads page, Ionic

What is happening is that when I reach the bottom of the page, it refreshes and loads the new data, however it doesn't show the data for the previous and current page.

For example it looks like this: 

1
2
3
4
* end of page, refreshes page* 
5
6
7
8

My function in my controller:

var i = 0;
$scope.result = [];    
$scope.noMoreItemsAvailable = false;

$scope.loadMore = function() {

 if (i < 4) {
   $http.get(url.recommended + i).success(function(response) {
     i++;
     $scope.result = $scope.result.push(response);
     console.log(response);

     $timeout(function() {
       $scope.result = response
     });

     $scope.$broadcast('scroll.infiniteScrollComplete');
   });
 } else {
   $scope.noMoreItemsAvailable = true;
 }
}

HTML:

<div class="item item-text-wrap" ng-click="post($event,res)" ng-repeat="res in result" ng-controller="recommendedJobsCtrl" ui-sref="tabs.jobDetails">
  <ul>    
    <li id="jobTitle">{{res.title }}</li>
  </ul>
</div>

<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

Upvotes: 0

Views: 754

Answers (2)

developer033
developer033

Reputation: 24874

Well, there are 2 main problems:

  1. You're attributing the value of the push for your array. You shouldn't do this, you just have to do this:
$scope.result.push(response);
  1. You should remove this timeout because it's overriding what you already have:
$timeout(function() {
  $scope.result = response
});

By the way, I'd recommend you to create a factory to prevent problems with async data.

You could do something like this:

angular
  .module('app', [])
  .controller("MainCtrl", MainCtrl)
  .factory("ItemsFactory", ItemsFactory);

ItemsFactory.$inject = ['$http'];

function ItemsFactory($http) {
  var factory = {
    getPages: getPages
  };

  return factory;

  function getPages(url) {
    return $http.get(url);
  }
}

Then, in your controller:

MainCtrl.$inject = ['$scope', 'ItemsFactory'];

function MainCtrl($scope, ItemsFactory) {
  var url = 'https://www.google.com';     

  function getResponse(response) {
    $scope.result.push(response.data);
  }

  function getError(response) {
    console.log(response);
  }

  ItemsFactory.getPages(url)
    .then(getResponse);
    .catch(getError);
}

Please, note: I also recommend you to change the way that you're retrieving your items from your back-end. It isn't a good way to retrieve the elements 1 by 1. The correct in your case is to retrieve all the four items at once and treat them in controller.

Upvotes: 1

Srijith
Srijith

Reputation: 1444

Your timeout is causing the $scope.result to be overwritten by the response. Just remove this and it should append the response to the result

REMOVE THIS

    $timeout(function () 
      {
      $scope.result=response 
      });

Upvotes: 0

Related Questions