Undo the creation of a record in Ember data when there is an error

I'm currently exploring the most effective method to prevent adding a record when encountering an error using Ember Data:

Here's the code snippet in question:

createUser: function() {
  // Create the new User model
  var user = this.store.createRecord('user', {
    firstName: this.get('firstName'),
    lastName: this.get('lastName'),
    email: this.get('email')
  });

  user.save().then(function() {
    console.log("User saved.");
  }, function(response) {
    console.log("Error.");
  });
},

I've implemented schema validation on the backend and it returns a 422 Error if validation fails.

If I ignore the error, the record gets added to the site and I also encounter a console error.

To address this issue, I made the following modification:

  user.save().then(function() {
    console.log("User saved.");
  }, function(response) {
    user.destroyRecord();
  });

While this partially solves the problem by removing the record after handling the server response, two issues remain:

1) The record still briefly appears and disappears (like a visual glitch).

2) The console error persists.

Is there a more effective way to handle this situation? Is there a way to avoid adding the record when an error is returned from the server? Can the console error be suppressed?

Any insights or suggestions would be greatly appreciated. Thank you.

Answer №1

To rectify the issue in the controller, you will first need to detect the error and then utilize deleteRecord() method to eliminate it from the store:

actions: {
    addNewPost() {
      let article = this.store.createRecord('post', {
        title: ''
      });

      article.save()
        .then(rec => {
          // carry out actions upon success
        })
        .catch(err => {
          article.deleteRecord();
          // perform other tasks when encountering an error
        });
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JQuery event listener is functioning properly when triggered from the console, but not when called from a

Here is the function I am working with: () => { console.log('before'); $('#scope_limit_toggle').change((e) => { console.log('from event'); }); } The element that the event is ...

Unable to locate the module model in sequelize

Having some trouble setting up a basic connection between Postgres and SQL using Sequelize. I keep getting an error where I can't require the model folder, even though in this tutorial he manages to require the model folder and add it to the sync, lik ...

Tips on efficiently modifying data in a JSON file with the help of jQuery and AJAX

My goal is to modify the JSON data by changing the value of the "secret" key when the uid is equal to 0090000219. Here is the initial JSON: [ { "id":23, "uid":"0090000219", "cid":"0090000013", "extension":"201", "secret":"Myojyo42_f", "leader":true, "sim ...

Unable to permanently uninstall Node.js

I recently downloaded the forever package using the command: npm install forever -g However, when I attempted to uninstall it using: npm uninstall -g forever I received the message up to date in 0.042s Despite this, I am still able to access the forev ...

What methods can be utilized to create sound effects in presentations using CSS?

Let us begin by acknowledging that: HTML is primarily for structure CSS mainly deals with presentation JS focuses on behavior Note: The discussion of whether presentation that responds to user interaction is essentially another term for behavior is open ...

Getting up and running with the NICE DCV SDK: A beginner's guide

Exploring the NICE DCV SDK provided by AWS has been my latest project. You can find the documentation here. However, I've hit a roadblock while trying to run the example code mentioned in the docs. My attempt to execute it on a node server resulted in ...

Accessing PUT/POST/DELETE endpoints directly from the backend through the browser without the need for UI connectivity

How can PUT/POST/DELETE methods be implemented in NodeJS directly within the browser? router.put('/sync/:syncId', (req, res) => { res.send(JSON.stringify({ "status": 200, "error": false, "response": "HELL ...

What is the process by which nodejs interprets and analyzes c++ code?

My expertise lies in Javascript, but I'm intrigued by the connection between Node.js and C++. Despite their differences, I wonder how they interact and communicate with each other. ...

I'm curious, in which environment does SvelteKit, Next.js, and Nuxt.js code execute? Also, is it possible to create HTTP request handlers within

My experience with using SvelteKit in my personal projects has been quite enjoyable. However, coming from a background of working with frameworks like Next.js and Nuxt.js, I often find myself confused about where the code I write actually runs. In my day ...

Tips for enhancing the contents of a single card within a react-bootstrap accordion

Currently, I am facing an issue with my columns expanding all cards at once when utilizing react-bootstrap accordion. My goal is to have each card expand individually upon clicking on its respective link. However, I am encountering difficulties in implem ...

The HTTP request is malfunctioning in a different location

I'm facing an issue where my code works in the w3schools code editor, but not on localhost or cpanel host. When I try to run it on another host, it gives me a bad request and doesn't return the answer. Here is the code snippet that I am working ...

Validating Cognito credentials on the server-side using Node.js

I am currently developing server-side login code for AWS Cognito. My main goal is to verify the existence of a user logging into the identity pool and retrieve the attributes associated with them. With email login, everything is running smoothly using the ...

Guide to resetting all ReactiveVars to false in Meteor JS

I am currently working on a recipe template where I am using {{#each recipes}} to render the recipes. I have implemented ReactiveVar to toggle the edit form of each recipe from hide to show. Everything is functioning correctly, but I want to ensure that ...

When tapping on grid items in the Safari browser using React Material-UI, they mysteriously switch positions

I've encountered an issue with grid Items in my React MATERIAL-UI project, specifically in the Safari browser. The problem does not occur in Chrome or Firefox. Within the grid, there are checkboxes that move from one place to another when clicked, a ...

Updating the ContextKey of the DynamicPopulateExtender based on the selected value from a DropDownList dynamically

I am facing an issue with my DynamicPopulateExtender control. I need it to render HTML based on the value of an asp:DropDownList. The problem lies in writing the JavaScript code that can fetch the dropdown value, assign it to the DynamicPopulate control&ap ...

creating keys dynamically in a Mongoose schema using Node.js JavaScript

I consider myself an intermediate in node.js. Within my mongoose schema, I have a variety of fields listed below: result_1 result_2 result_3 result_4 result_5 The data will come in numeric form (1-5) as the result number, and based on this number, I nee ...

Is file timestamp utilized by Apache to verify if a resource has been changed?

Currently, I am working on an HTML page that references a large JavaScript file (1MB+) that is rarely updated. According to this source, the JavaScript file will not be resent if it hasn't been modified. I'm curious about how Apache determines i ...

Using TypeScript, what is the best way to call a public method within a wrapped Component?

Currently, I'm engaged in a React project that utilizes TypeScript. Within the project, there is an integration of the react-select component into another customized component. The custom wrapped component code is as follows: import * as React from " ...

Is it possible that data scraping with puppeteer consistently retrieves information solely from the initial page?

I'm facing an issue while trying to extract data from a website using puppeteer. Whenever I make a request for data, it always returns the information from the first page, even if I specify a different URL. Strangely, when I manually search for the sa ...

The navigation bar remains fixed while the section heading fails to display properly

================================= My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking o ...