Ember View does not updating as of the change that happen to the model immediately

Question

When I am making an AJAX request to update some values the data or model is changing. But the updated model is not reflecting immediately. It is reflecting only after clicking refresh. I want to only modify a view of a div in the page. I have tried many things but not successful. Can anyone suggest me the way to solve the issue? The git repo: https://github.com/SyamPhanindraChavva/trell-app-front-end

templates/note.hbs

 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <p><a class="dropdown-item" {{action 'updateNote' "doing" note.id}}>DOING</a></p>
    <p><a class="dropdown-item"{{action 'updateNote' "done" note.id}}>DONE</a></p>
    <p><a class="dropdown-item"{{action 'deleteNote'  note.id}}>DELETE</a></p>
  </div>

controllers/notes.js

status2:Ember.inject.service('work-status'),
actions: {
    updateNote(upstatus,id){
        let status1 = Ember.get(this,'status2');
        status1.makeputrequest(upstatus,id);
        this.toggleProperty('parameter');
    }
}

services/work-status.js

makeputrequest(status1,id1)
  {
    $.when($.ajax ({
  //  get(this,'layout.referrer.owner.router').transitionTo('notes');
        type: 'PUT',
        url:'http://localhost:3000/notes/'+id1,
        data: {note:{status:status1}},

      })).then(function(result){
        console.log(result);
      }).catch(function(err){
        console.log("you have error")
      });
},

The thing I am trying to make is whenever I change the status of a record the corresponding record in the UI must also go to the corresponding table or container in UI.

Answer 1

Because you're using ajax calls directly in ember, you'll be responsible for setting the new properties once it's complete.

In services/work-status.js, you'll want to return the promises generated by the ajax calls.

In controllers/notes.js, chain .then to the returned promise and call and set the new property.

EG - controllers/notes.js

updateNote(upstatus,id){
    let status1 = Ember.get(this,'status2');
    status1.makeputrequest(upstatus,id).then((){
        this.get('model').findBy('id',id).set('status',upstatus);
    });
},

---

With that said, this isn't the correct route to take. You're mixing ember-data with plain ajax calls which is making the logic of your codebase more difficult than necessary.

If you modify your action to take the entire note as an argument, change the status, and just save the model, you wouldn't need to use the service.

// templates/note.hbs
<p><a class="dropdown-item" {{action 'updateNote' note "doing"}}>DOING</a></p>

// controllers/note.js
updateNote(note,upstatus) {
    note.set('status',upstatus)
    note.save();
}