Storing Checkbox Selections in a Database using Ember.js

I am facing an issue with a checkbox that is supposed to save to the database immediately after the value changes. The checkbox is linked to the data element called 'audit'. Below is how the checkbox is implemented in the template:

{{view Site.ReleaseChecklistToggleView checkedBinding="audit" contentBinding="this" placeholder="#"}}

Here is the definition of Site.ReleaseChecklistToggleView:

Site.ReleaseChecklistToggleView = Em.Checkbox.extend(
    change: (e)->
        this.content.save()
)

It seems like the 'audit' variable is not getting set before the 'change' function is triggered. As a result, it sends 'null' as the value to the database. However, if I log this.content.audit within the 'change' method, it correctly shows either 'true' or 'false'. This leads me to believe that the Ember model is not getting updated until after the 'change' method runs.

Can anyone offer guidance on this issue? Is there a better approach I should be taking?

javascriptcheckboxember.js

Answer №1

Consider the following steps: 

Site.ReleaseChecklistToggleView = Em.Checkbox.extend(
  valueChanged: ->
    @get("content").save()
.observes("checked"))

Answer №2

Taking a look at the Ember guide for the Todo application is highly recommended (). I successfully implemented auto-saving of a specific attribute using a checkbox by following their instructions.

If the provided link is no longer accessible, here is how they accomplished it...

Handlebars

<!--- ... additional lines condensed for brevity ... -->
{{#each itemController="todo"}}
  <li {{bind-attr class="isCompleted:completed"}}>
    {{input type="checkbox" checked=isCompleted class="toggle"}}
    <label>{{title}}</label><button class="destroy"></button>
  </li>
{{/each}}
<!--- ... additional lines condensed for brevity ... -->

Controller

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // used as getter
      return model.get('isCompleted');
    } else {
      // used as setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

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

Vue router is unable to render or mount the component at the root path

I am currently working on a webpage using vue, vue-router, and laravel. I have encountered an issue where the Home component is not being rendered in the router-view when I access localhost/myproject/public_html/. However, if I click on the router link to ...

javascriptvue.jsvue-router

I am continuously encountering the error message "Resource loading failed" whenever I attempt to launch a React application

I'm currently developing a React App using Webstorm as my IDE. Everything seems to be configured correctly, but whenever I attempt to run the app, I encounter an error message stating "Failed to load resource: the server responded with a status of 404 ...

javascriptnode.jsreactjsreact-redux

Loading a 3D model dynamically in three.js from a local file

Attempting to upload a 3D model from a local file during runtime is resulting in a CORS error message. While utilizing http-server for uploading predetermined models at the beginning works fine, the issue arises when trying to upload random objects from lo ...

javascriptthree.jslocalhostsame-origin-policy

Strangely unusual issues with text input boxes

So I've set up two textareas with the intention of having whatever is typed in one appear simultaneously in the other. But despite my best efforts, it's not working as expected. Here's the code snippet: <script> function copyText () { ...

javascript

Filter an array of objects recursively based on various properties

I need help filtering an object with nested arrays based on specific criteria. Specifically, I want to filter the main array by matching either RazaoSocial:"AAS" or Produtos:[{Descricao:"AAS"}] This is my code: var input = [ { RazaoSocial: 'AA ...

javascriptarraysrecursionfilter

Unusual JavaScript AJAX antics

I have a situation that looks like this: elFinder.prototype.commands.info = function() { this.exec = function(hashes) { var temp_array = new Array(), temp_html = new String(); var request = new XMLHttpRequest(); ...

javascriptajaxasynchronous

What steps should be taken in VUEjs if the API response is null?

There's a method in my code that retrieves a token from an API: let { Token } = await API.getToken({ postId: postId }) if(){} Whenever the token is null, I receive a warning in the console saying "Cannot read property 'Token' ...

javascriptvue.jsecmascript-6vuejs2vue-component

When you use Array.push, it creates a copy that duplicates all nested elements,

Situation Currently, I am developing a web application using Typescript/Angular2 RC1. In my project, I have two classes - Class1 and Class2. Class1 is an Angular2 service with a variable myVar = [obj1, obj2, obj3]. On the other hand, Class2 is an Angular2 ...

javascripttypescriptangular

The destruction of scope is not activated

Check out my issue in action with this plunkr demo. The problem I'm encountering is quite straightforward: manually calling $destroy or removing the element does not trigger the $destroy event. function link(scope, element, attrs) { // Manually ca ...

javascriptangularjsangularjs-directiveangularjs-scope

What is the reason behind the occurrence of an error when attempting to iterate through an array of objects within my react.js component?

Here is an example of some code: class Stepper extends Component { state ={ quiz_data: [ patient_data: [ {name: "A", age: "1"}, {name: "B", age: & ...

javascriptarraysreactjsobject

Button missing post ajax loading

I've encountered a problem with my code that populates a table and contains buttons, which trigger an AJAX load. The content is loaded into a DIV with the ID 'DIV1', but when I try to access the buttons in that DIV1 by clicking on them, they ...

javascriptjqueryajaxdombutton

Custom JSON filtering

I have a JSON object called Menu which contains various menu items for my system that I am developing using VueJS + Vuetify. I need to filter these menu items based on the "text" field, regardless of position in the text and without differentiating between ...

javascriptjsonvue.jsfiltervuetify.js

PHP fails to retrieve posted data from AJAX when using serializeArray()

I have been struggling with a form that is utilizing jQuery validation and AJAX to submit data to a PHP script for backend processing. The AJAX function uses serializeArray() to collect the form values, but despite my best efforts, I cannot seem to success ...

javascriptphpjqueryajax

Discover the way to utilize the java enum toString() function in jQuery

In my Java Enum class called NciTaskType, I have defined two tasks: Pnd Review Woli and Osp Planning. public enum NciTaskType { PndReviewWoli, // 0 OspPlanning, // 1 ; @Override public String toString() { switch (this) ...

javascriptjavajqueryenumstostring

What is the best method for verifying that audio has not been loaded correctly?

After creating a script to scrape for mp3 audio file URLs and load them into my HTML audio element's src, I encountered an issue where some of the URLs were not functioning properly. As a result, the audio was unable to execute the load() method since ...

javascriptjqueryhtmlaudio

Having trouble accessing Angular 1.5 Scope Variable within PouchDB response function?

So, take a look at this code snippet... testApp.controller(...) { $scope.results = []; $scope.hasData = true; $scope.results.push({ "name": "test" }); // This part works fine db.get('table_people').then(function(res ...

javascriptangularjsjsonsingle-page-applicationpouchdb

Is TypeScript being converted to JavaScript with both files in the same directory?

As I begin my journey with TypeScript in my new Angular project, I find myself pondering the best approach for organizing all these JS and TS files. Currently, it appears that the transpiler is placing the .js files in the same directory as the correspondi ...

javascripttypescript

Tips for sorting data based on duplicate dates within a single array element

Here is the existing Object Array structure: [ { "date":"12-09-2019 12:00 PM", "id":"1", "name":"hello1" }, { "date":"12-09-2019 03:00 PM", "id":"2", "name":"hello2" }, { "date":"12- ...

javascripttypescriptangular6angular8

Error encountered in parsing JSON: abrupt end of data (JavaScript)

I have been working on a few functions that are responsible for parsing JSON data, both external and internal, and displaying it on a local webpage using the localStorage feature. While I have successfully displayed the external JSON data, I am running int ...

javascriptajaxjson

Please include the document with a name that contains spaces

I am facing an issue where I cannot attach files with spaces in the name. However, when a file with no space in the name is successfully attached. I am using CodeIgniter for this purpose, uploading the file to the server before attaching it. I use the help ...

javascriptphpajaxcodeigniter