Dominique Charlebois Dominique Charlebois - 1 year ago 101
Ajax Question

Display a pending icon when status is pending and Display a completed icon when status is completed

The General Design

I want to be able to display a pending status icon in the area when the get request is still pending and the status of that request is pending, however I want it to display a completed status icon when the get request returns a status of completed.

In my handlebars:

{{!-- Status --}}
{{#each as |status|}}
{{#if statusPending}}
<p><span><i class="glyphicon glyphicon-option-horizontal"></i></span>&nbsp;</p>
<p><span><i class="glyphicon glyphicon-ok"></i></span>&nbsp;</p>

statusPending being an action that will check the status.

I was thinking something like:

actions: {
statusPending: function() {
if ('status' == 'pending') {
type: 'GET',
return: true,

where status is in the header of the get request and pending is what it returns.

That is what I've got so far... but It doesn't work (of course).
Any suggestion, code or links to relevant reading material is welcomed. By returning true it satisfies the if/else statement in the handlebars and therefore will show false - completed if not true.


Answer that worked for my case.

didInsertElement: function() {
var _thing = this.get('thing');

this.set('isPending', _thing.status === 'PENDING');


it should look like this:

    isPending: false

  checkStatus: function() {, function() {
        Ember.$.ajax(/* your code here */).then(function(response) {
        if (response.status == 'finished status') {
            this.set('isPending', false);
        } else {
    }, 5000); //check every 5 seconds

    actions: {
    startAsyncOperation: function() {
        this.set('isPending', true);