I have a route named 'testroute' (localhost:8080/testroute).
It has one record. I tried to edit it (localhost:8080/testroute/edit/1). I gave new values and submitted. The values got failed to cross server side validation and error message was thrown with the status code 422.
Then I decided not to edit it anymore. From here itself I went another route named 'nextroute' (localhost:8080/nextroute).
Now, again I tried to go to 'testroute' (localhost:8080/testroute). It didnot go and in console I got error as "Attempted to handle event pushedData
on while in state root.loaded.updated.invalid."
What I used to make ajax call with the edited values is
this.get('model').save().then(function(response){
console.log('response',response);
//code
},function(error){
console.log('error',error);
//code
});
When I refresh the page I can go to 'testroute' (localhost:8080/testroute). But after this error come I can't open.
The record was in modified state in ember-date (I saw it in ember inspector). When I refresh it only it goes to clean state.
Fom what I can tell, your server couldn't process your post/patch request and returned an error. Therefore, your model is in an invalid state. What you should do, is, once the error is returned, to rollback your model:
var model = this.get('model')
model.save().then(function(response){
console.log('response',response);
//code
},function(error){
console.log('error',error);
model.rollbackAttributes();
});
EDIT:
If you need to keep the model in its state until you leave the page, you should make use of the willTransition
event of your route, e.g.:
Ember.Route.extend({
actions: {
willTransition: function(transition) {
if (this.controller.get('model.errors')) {
Ember.Logger.debug('model will be reverted');
this.controller.get('model').rollbackAttributes()
}
}
}
});
See here for more information.