Updating AngularJS Database Using X-Editable

Question

So, I'm using AngularJS with X-Editable to make editing my data easier.

I have a table with all the customer information, such as name, phone, address, etc. And I could apply X-Editable only fine until the moment when I need to actually save the changes to the database.

In addition, this page shows only one client, this is a separate client page with only its details.

This is the code I'm using:

page.html

 <table fixed-header class="detcli_table" ng-init="get_detcliente()"> <thead> <tr> <th>Campo</th> <th>Informação</th> </tr> </thead> <tbody> <tr> <td>Código</td> <td>{{cliente.id}}</td> </tr> <tr> <td>Nome</td> <td><span editable-text="cliente.nm_cliente" onaftersave="updatePerson(cliente.nm_cliente)">{{cliente.nm_cliente || "Empty"}}</span></td> </tr> <tr> <td>Tel.</td> <td><span editable-text="cliente.num_tel" onaftersave="updatePerson(cliente.num_tel)">{{cliente.num_tel || "Empty"}}</span></td> </tr> [... more code ...] </tbody> </table> 

app.js

 myApp.controller('DetClientesCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { var clienteId = $routeParams.id; $scope.get_detcliente = function() { var url = 'scripts/php/db.php?action=get_cliente'; return $http.get(url).success(httpSuccess).error(function() { alert("Oops, erro!"); }); } httpSuccess = function(response) { $scope.detRes = response; } function getById(arr, id) { for (var d = 0, len = arr.length; d < len; d += 1) { if (arr[d].id === id) { return arr[d]; } } } $scope.get_detcliente().then(function(){ $scope.cliente = getById($scope.detRes,$routeParams.id); }); //Update Client $scope.updatePerson = function() { $http.post('scripts/php/db.php?action=upd_cliente', { 'id': $routeParams.id, 'nm_cliente' : $scope.nm_cliente, 'num_tel' : $scope.num_tel } ).success(function (data, status, headers, config) { $scope.get_detcliente(); console.log("efeutou o post!"); }).error(function (data, status, headers, config) { console.log("Algo deu errado!"); }); }; }]); 

control.php
This is the method that I use to add new data, delete and, in this case, update existing data

 function upd_cliente() { $data = json_decode(file_get_contents("php://input")); $id = $data->id; $nm_cliente = $data->nm_cliente; $num_tel = $data->num_tel; $qry = "update cad_cliente set nm_cliente = '$nm_cliente', num_tel = '$num_tel' where cd = '$id'"; } 

When I run the code, I get no errors. console.log that I use is displayed correctly in the console, the editing I do works fine on the screen, but when I refresh the page, the data is not saved, it goes back to the previous data.

What could be wrong?

And also I don’t know if this is the best way to do this, since I have a table with about 10-15 lines of information, so if I edit only 1 or 5 lines, the code will have to run for every edit I make.

Is there a better way to handle it?

Answer 1

Well, after some research and many attempts / failures in working with the solution.

on page.html I needed to remove the code inside () , so it would look like this:

page.html

 <td><span editable-text="cliente.nm_cliente" onaftersave="updatePerson()">{{cliente.nm_cliente || "Empty"}}</span></td> 

And on app.js I needed to use $scope.cliente.nm_cliente instead of $scope.nm_cliente . Thus, the code will look like this:

app.js

 $scope.updatePerson = function() { $http.post('scripts/php/db.php?action=upd_cliente', { 'id': $routeParams.id, 'nm_cliente' : $scope.cliente.nm_cliente, 'num_tel' : $scope.cliente.num_tel } ).success(function (data, status, headers, config) { //Success code here }).error(function (data, status, headers, config) { //Error code here }); }; 

Then, in the php file, I just need to write other fields that I need to update in the database, in my case it will be possible to update more than 15 fields.

Note. . As far as I know, this code only works with the onaftersave="" option, because if we use the onbeforesave="" option, like the name itself, the data will not be transferred since it is executed before new data is transferred to scope $ scope.

I'm sorry if any of my information is incorrect, I am starting to learn AngularJS right now. But it works for me.

Also, I don't know if there is a better way to achieve this result, so if anyone knows, please share it with us!