Search code examples
ember.jsember-cli

Attempted to handle event `pushedData` on <testapp@model:testroute::ember1700:1> while in state root.loaded.updated.invalid


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.


Solution

  • 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.