CODEWITHSUNDEEP
ember.jsember-data
syamphanindra
syamphanindra

Reputation: 55

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

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.

Upvotes: 0

Views: 1530

Answers (2)

Trenton Trama
Trenton Trama

Reputation: 4930

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();
}

Upvotes: 2

Mikelemuel
Mikelemuel

Reputation: 378

Ajax is only meant if you are not trying to change something on the records. However, if you would like to change a value of your records you should be using ember-data

Upvotes: 0

Related Questions