0

To give a brief rundown of what I am working on:

This app is a phonebook that makes a call to our backend system and returns a JSON payload which is then parsed and stored to Local Storage for offline access and then the data is reflected in a simple homescreen format.

To give a simple workflow:

  1. User logs in
  2. Call to back-end via Ajax request is made under the user's account
  3. Data is stored to local storage
  4. Data is added to $rootScope.allEmployeeInformation variable
  5. Ion-List reflects the data stored in the $rootScope.allEmployeeInformation variable on the home screen.

My issue lies here:

After logging in the data is pulled and stored properly but the Ion-List does not display the data until the page is refreshed either via the pull to refresh functionality I have implemented, the re-sync button or restarting the app.

Is there any way to ensure that these pieces of data are displayed without the user needing to refresh the page?

Would be more than happy to provide anymore information needed. Thank you for the help guys!

Edit, updating with some code as requested:

Code which performs the ajax request

Html which displays the information:

<ion-view> 
<ion-content class="scroll-content has-header animated fadeIn" ng-controller="HomeScreenController" padding="true">
<ion-refresher
pulling-text="Pull to resync...."
on-refresh="resyncEmployees(true)">
</ion-refresher>
<ion-list>
<ion-item
class="ion-item-content"
ng-repeat="employee in allEmployeeInformation | orderBy:'lastName'"
ng-controller="AccountCtrl"
ng-click="changeTabb(1, {{employee.identifier}})">

<div class="item-icon-left">
<i class="icon ion-person"></i>
<h3>{{employee.userCN}}</h3>
<h5>{{employee.title}}</h5>
<h6>{{employee.town}}</h6>
</div>

<div class="item-icon-right">
<i class="icon ion-chevron-right icon-accessory"></i>
</div>

</ion-item>
</ion-list> 
</ion-content>
</ion-view>

Edit #2: I believe I've narrowed to down to infact being an issue with ng-repeat and not Ion-List as I expected at first glance. Updating the reference tags.

Cheers! Mike

Michael Amato
  • 55
  • 9
  • Your ajax request is dumping the data into rootScope but never updates the `allEmployeeInformation` variable that the `ng-repeat` is using. There's no reason to involve root scope here at all. – Daniel Beck Sep 08 '16 at 14:21

2 Answers2

4

Pretty easy - you're using jQuery's $.ajax and that doesn't trigger a digest cycle. Digest cycles are what tell Angular to update and 2 way bind essentially (dumbed down). Use the provided Angular $http module.

$http.get(agent).then(function(response) {

});

Also, you're calling location.reload() at the end of your code - which will get rid of any client changes you've made so far. You probably don't need that.

tymeJV
  • 103,943
  • 14
  • 161
  • 157
  • Thanks for the response @tymeJV - going to see if this fixes my issue and report back for other's experiencing the same in the future. Accidentally forgot to remove that location.reload() on the pasteBin... good catch! Thanks! – Michael Amato Sep 08 '16 at 14:23
  • @MichaelAmato -- No problem - also, future tip - post your code here and not in a pastebin - it'll get a bigger audience and follow the posting rules :D – tymeJV Sep 08 '16 at 14:24
  • Thanks @tymeJV! Will do for the future... amateur mistake, sorry! Just updated the code to use the $http.get rather than the Ajax and now it seems that the security wrapper than my team uses in order to access our backend agent is causing issues. We authenticate users and then the wrapper automatically attaches any cookies needed to ajax requests to access the needed back-end agent. Will continue investigating. – Michael Amato Sep 08 '16 at 14:33
  • @MichaelAmato -- You can take a look at the `$httpInterceptor` with Angular - you can configure requests to always get headers, etc. https://docs.angularjs.org/api/ng/service/$http - See the section titled "Interceptors" – tymeJV Sep 08 '16 at 14:35
  • Just took a read through the documentation and honestly left a bit more confused than before reading through it. In regards to your explanation before... would there be a way to trigger a digest cycle while maintaining the use of an ajax request? I attempted $scope.$apply() and $scope.$digest() and an error was throwing stating that "$digest already in progress" – Michael Amato Sep 08 '16 at 14:47
  • Yeah - a safe way to do it is to use `$timeout` - this will trigger a digest cycle - `$timeout(function() { $scope.doStuff() });` - although it's very hacky it'll work. @MichaelAmato – tymeJV Sep 08 '16 at 14:59
  • This would have fixed this issue if the ng-repeat not updating was actually the issue. After diving much deeper it turns out that my Ajax request was false 200... when making a call to our backend if you're not authenticate it returns a form for you to login, therefore not returning the expected data. Though it returns a 200 Status, the data was not actually coming back. But once refreshing the page, our authentication mechanism was kicking and in allowing us to properly get data returned. No wonder none of the suggestions worked... Thanks for your time @tymeJV - very much appreciated! :-) – Michael Amato Sep 08 '16 at 17:11
0

Without seeing any code, you could also try setting cache: false in the routes config. See example below:

.state('dashboard', {
  cache: false,
  url: '/dashboard',
  views: {
    'menuContent' : {
      templateUrl: 'templates/dashboard.html',
      controller: 'DashboardController',
    }
  }
})

If you have any code available to post I may be able to help more.

EDIT Why do you need to use $rootscope? You should also try using $scope instead because you will always have access to the employee information in localStorage if you want to use it in another view or controller.

dmonaldo
  • 189
  • 2
  • 13
  • Thanks for the response @user1237122! I just updated my post with some of the code to see if you could provide any more insight. It seems forcing a refresh after the ajax request complete places the code into an infinite loop of refreshing as the ajax request needs to be executed every time the app is refreshed to ensure the most up to date employee information. Thanks again! – Michael Amato Sep 08 '16 at 13:18
  • Just realized I forgot to also add that setting cache to false on the state results in no data being displayed even after the refresh that was allowing information to be displayed previously. – Michael Amato Sep 08 '16 at 13:56
  • "Forcing a page reload" is a terrible strategy for Angular apps -- the whole point of a SPA is that you don't need to reload the page when data updates. – Daniel Beck Sep 08 '16 at 14:18
  • @DanielBeck You're right, I removed that from my answer. @tymeJV's strategy to use `$http` is better. – dmonaldo Sep 08 '16 at 19:50