Tips for changing the value in Angular X-editable

I am having trouble getting it to save the values. I'm struggling to understand the onbeforesave documentation completely. Here is my code, but unfortunately, it doesn't seem to be working.

html

<div class='title' editable-text='task.title' onbeforesave="updateTitle(task)">
        {{task.title}}
</div>

js

var app = angular.module('Todolist', ['ngResource', 'xeditable']);

  app.factory('Task', [
    '$resource', function($resource) {
      return $resource('/users/:user_id/tasks/:id', {user_id: '@user_id'}, {update: {method: 'PUT'}});
     }
   ]);

  app.controller('TasksCtrl', [
    '$scope', 'Task', function($scope, Task) {

    $scope.user = gon.current_user

    $scope.updateTitle = function(task) {
        id: task.id,
        Task.update(task);
    }
  }
]);

Answer №1

Before the model is updated, the onbeforesave function is triggered, meaning that the task object you pass will remain unchanged.

There are two alternative solutions. You can either utilize $data, which holds the current value of the field being updated, or modify the attribute to 'onaftersave' (called after the model update) to ensure access to the most recent data.

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 database threw an error: "Duplicate key found in collection causing MongoError: E11000"

I'm currently in the process of updating an object within an array found in a document "state": [], "users": [{ "ready": false, "_id": { "$oid": "5fb810c63af8b3 ...

"Utilizing Vuex for a detailed and structured approach to organization

Currently, I am tackling a rather extensive project and my aim is to divide Vuex modules into as many segments as feasible. Specifically, I intend to segregate the API functionality from the UI, maintaining a clear distinction between server-sourced data a ...

Handling Asynchronous API Requests with AngularJS

I am facing an issue with displaying data from API in my files foo.js and foo.html. While fetching information asynchronously in foo.js, I store it in an object that should be accessible in foo.html. However, despite receiving the data correctly, I am una ...

Having trouble importing a CSS file into a Vue.js single file component?

I am attempting to include 2 CSS files within the style tag of my Vue.js single-file component. <style > @import '../assets/styles/jquery-ui.js.css'; @import '../assets/styles/jquery-ui.css'; </style> However, I am ...

"Retrieve real-time information from the server directly on the client side

Within my express router, I validate the data submitted on a form and then render another page if the data is valid, passing along the form data. My goal is to be able to access this passed data on the client-side. In the chat.ejs view, I have a chatroom.j ...

A step-by-step guide on changing an image

Is it possible to change an image when the user clicks on a link to expand its content? <ul class="accor"> <li> Item 1 <img src="../plus.png"> <p> Lorem ipsum dolor sit amet</p> </li> </ul> $(' ...

The process of retrieving information from JSON files through HTTP requests in AngularJS

After retrieving a JSON file of countries and successfully logging the data in the console, I encountered an issue where the data is not displaying in the HTML file. It appears fine in the console but refuses to print on the HTML page. So, how can I prop ...

Implement Placeholder feature in ng2-ckeditor with the combination of Typescript and Angular 2.0

I am encountering an issue while trying to add the placeholder plugin to the CKEditor toolbar. When I include extraPlugins:'placeholder' in the CKEditor configuration, I receive the following error - Error: [CKEDITOR.resourceManager.load] Resou ...

Utilizing AWS SDK (S3.putObject) to transfer a Readable stream to Amazon S3 using node.js

I am aiming to successfully send a Readable stream to S3. However, I have encountered an issue where the AWS api only seems to accept a ReadStream as a stream argument. When using a ReadStream, everything works as expected, as shown in the following code ...

What is the reason behind fullPage.js only displaying the first page while hiding all others?

My website development is currently hindered by an issue with fullPage js. Only the first page is visible when using fullPage js, even though the links are properly set up on the dev site. As a result, I have to disable fullpage in order to make any progre ...

How do I dynamically adjust class names for menu items as I scroll using jQuery?

I have a website with different sections identified by unique IDs, such as: <section id="home"> First Section </section> <section id="about_us"> Second Section </section> <section id="what_we_do&q ...

Looking for a condensed version of my app script to optimize speed and efficiency

In my script, users input data and run the script by clicking a button. The script then appends the data to two different tabs and clears the data entry tab. However, I encountered an issue where I had to manually hard code each cell for appending, causi ...

Error Occurs When Attempting to Delete in ASP.NET MVC

I am encountering an issue while attempting to delete something, as it is displaying the following error message: "Error: Unknown Action" Below is my controller code: [Authorize(Roles = "Admin, Staff")] [HttpPost] [ValidateAntiForgeryT ...

Can someone help me figure out where I'm going wrong with the JS ternary conditional operator

Looking to improve my JavaScript logic skills as a beginner. Appreciate any tips or feedback on the function and not just this specific question. I'm curious why the code outputs --> [3,5] function divisors(integer) { let divisors = [] for (le ...

APNS functionality is supported by APN providers, but it is not compatible with NodeJS in a production

I've set up a nodeJS script to send APNs. In development, it always works flawlessly. However, when I switch to production, the notifications never go through. Oddly enough, when I use the same notification ID with my production certificate in Easy Ap ...

Executing a particular function on multiple buttons that have not been initialized yet

I am struggling to make this code work for every button and I haven't been able to find an explanation for the issue. I believe it may be a small detail that I am overlooking. $(document).ready(function() { // delete the selected row from the datab ...

What is the method to conceal an element after detecting and locating a specific class using jQuery?

Can someone please assist me today with the following task: Step 1: <div id="htmlData"> <div class="col-md-12"> <div class="pull-left"> <h3>Report: <strong>Travel </strong></h3> ...

What is the proper way to update text within a div using angularJS?

AngularJS Code: myEl = angular.element(document.querySelector('#divData')); myEl.html('This is text. <b>This is a bold text</b>'); By using the above method, you can change the content of the #divData element and add HTML ...

"Utilizing Socket.io to set up a customized room with specific

I am currently in the process of developing a multiplayer poker game using node.js and socket.io along with a redis adapter. Among the parameters I have for rooms are: name: string - Server Name, used for the lobby password: string - Server password, fo ...

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome

I am currently working on a Display component that is supposed to show an item. The item should be styled with the css property text-decoration-line, applying line-through when the Available prop is set to false, and no decoration when set to true. Howev ...