AngularJS update database using X-Editable

Question

So, i'm using AngularJS with X-Editable to make an easier way to edit my data.

I have a table with all the information of a client such as name, phone, address, etc.. And I could apply X-Editablejust fine until the moment I need to actually save the edit on the database.

Also, this page just show one single client, is an individual client page, with only his 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 i'm using to add new data, delete and, in this case, to update an 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 at all. The console.log I'm using is showing properly in the console, the editing I do, is working fine on the screen but when I refresh the page, there is no data saved, it goes back to the previous data.

What may be wrong?

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

Is there a better way to process it?

Butane

Do you check using Web Development tools if the post message send correctly ? – Endocentric

The only i checked was the function to send the data to the php page, and there is no error. I'm trying (but i don't know how and didn't found it yet) a way to check if the saved data is going inside the array in my updatePerson function. Do you know how to check it? i think the problem is there, because the php there is no secret. – Butane

using console.log to print the value of array before post – Endocentric

sorry if a dumb question, but how am i supposed to do that? I'm new to angular. – Butane

Answer 1

Well, after some research and a lot of try/fail i cam up with the solution.

in the page page.html i needed to remove the remove the code inside the (), so it is going to be like this:

page.html

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

And on the app.js i needed to use $scope.cliente.nm_cliente instead of $scope.nm_cliente. So the code will be 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, on the php file i just need to write the other fields i need to update on the database, in my case, it will be more than 15 fields to be possible to update.

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

I'm sorry if any of my information is wrong, i'm starting learning AngularJS right now. But this is working 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!

Butane

Seems I showed up too late. Glad you figured it out. – Terminate

@MichaelOryl but maybe you can still help me.. I'm testing it online now and there is a problem.. Everything changes, just fine, etc.. But if i reload the page (with f5) the screen show the old value and if i reload with ctrl + f5 then the new value shows up on the screen. Do you have any idea on how to fix this? – Butane

My guess is that you have cached data from the server that is old. The browser will try to use cache with F5, whereas it will always get a new copy from the server with ctrl-f5. If you can put a copy up on Plnkr.co or something, then perhaps I could look at actual working/broken code. – Terminate