How to show or hide the counter according to ajax response in ember.js controller?

Question

I set the emberjs action for the button, so whenever a user clicks on this button, I need to go to a new page. Before making the transition, I need to make a few api calls, and based on the results of the api calls, I will go to a new page. I have no problem with the transitions based on the results, but I cannot show the spinner image during these api calls.

In the example here, I used the setTimeout method to delay the transition, since I cannot expose the api. In this, I saw console logs being printed in order; but I can not see the counter during the timeout. Any help would be appreciated in this regard. Thanks in advance.

Answer 1

In the above example, you call hideSpinnerafter a call setTimeoutthat is preceded by a call to your function showSpinner. Since these 3 function calls take very little time, you couldn’t even notice how the counter appeared, since the spinner is again hidden almost instantly.

What you need to do is call hideSpinnerthe callback function immediately after the call transitionToRouteon your controller.

EDIT
Based on @buuda's suggestion and your new example , I came up with this .

, @buuda, , / AJAX, Ember.RSVP.all().

Answer 2

RSVP Promises, API:

App.IndexController = Ember.Controller.extend({
  actions: {
    'goToFoo': function(){
      var Indexcontroller = this;
      showSpinner();

      Ember.RSVP.all(promisesArray).then(function(resultsArray) {
         hideSpinner();
         Indexcontroller.transitionToRoute('foo');
      }, function(error) {
         ...handle errors
      });
    }
  }
});

ajax , RSVP.all. Array ajax . , - .

Answer 3

Try to do this with jquery. Maybe hide the elements on the screen and show a loading indicator when making these api calls?

$("loading_indicator").show()
$.ajax({
    type: "POST",
    url: url,
    success: function(xhr,test){
        $("loading_indicator").hide()
    }
})