在内联编辑后输入数据并在AJAX中使用它来更新表

时间:2015-09-30 13:29:27

标签: javascript php mysql ajax angularjs

我正在尝试在angularJS中执行内联编辑,然后更新在Mysql表中输入的数据,但我是角度新手并且不知道如何处理输入的数据并使用AJAX发送它,所以在下面的代码中:变量编辑后tid, tname, tphone仍为空。如何在内联编辑后将新ID(或名称或电话)存储到数据库中?

HTML:

<table class="table">
                    <thead>
                        <tr>
                            <th class="id">User Id
                            </th>
                            <th class="name">Name
                            </th>
                            <th class="phone">Phone
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in ItemsByPage[currentPage]">
                            <td ><div contentEditable="true" data-ng-model="tid">{{item.id}}                                    
                                </div><button ng-click="inlineupdate()" type="button" class="btn btn-primary">Save</button></td>
                            <td><div contentEditable="true" ng-model="tname">{{item.name}}</div>
                            <button ng-click="inlineupdate()" type="button" class="btn btn-primary">Save</button></td>
                            <td><div contentEditable="true" ng-model="tphone">{{item.phone}}</div>
                            <button ng-click="inlineupdate()" type="button" class="btn btn-primary">Save</button></td>
                        </tr>
                    </tbody>
                </table>

JS:

var myApp = angular.module('myApp', []);
 var TableCtrl = myApp.controller('TableCtrl', function ($scope, ListService,$http) {
$scope.inlineupdate = function () {
                var data = {
                    tid : $scope.tid,
                    tname : $scope.tname,
                    tphone : $scope.tphone
                };


                $.ajax({
                       data: data,                        
                       type: "post",
                       url: "inlineupdate.php",
                       success: function(data){
                            alert("Data Updated");
                       },
                       error:function (XMLHttpRequest, textStatus, errorThrown) {
                                if (textStatus == 'Unauthorized') {
                                    alert('custom message. Error: ' + errorThrown);
                                } else {
                                    alert('custom message. Error: ' + errorThrown);
                                }
                        }
                    });      

            };
}); 
myApp.directive('contenteditable', function() {
            return {
                require: 'ngModel',
                link: function(scope, elm, attrs, ctrl) {
                    // view -> model
                    elm.bind('blur', function() {
                        scope.$apply(function() {
                            ctrl.$setViewValue(elm.html());
                        });
                    });

                    // model -> view
                    ctrl.render = function(value) {
                        elm.html(value);
                    };

                    // load init value from DOM
                    ctrl.$setViewValue(elm.html());

                    elm.bind('keydown', function(event) {
                        console.log("keydown " + event.which);
                        var esc = event.which == 27,
                            el = event.target;

                        if (esc) {
                                console.log("esc");
                                ctrl.$setViewValue(elm.html());
                                el.blur();
                                event.preventDefault();                        
                            }

                    });

                }
            };
        });     

和inlineupdate.php

<?php
header('Content-Type: application/json');
include 'connect.php';
$db = new database();
$db->setDb_name('training');
$db->connect();

if(isset($_POST)){ 
 $id = $_POST['tid'];
 $name = $_POST['tname'];
 $phone = $_POST['tphone'];  
 if(isset($_POST['tid'])){
    $data =   $db->inlineupdate('user',array('id'=>$id),array('name'=>$name));
    echo json_encode($data);
}
if(isset($_POST['tname'])){
    $data =     $db->inlineupdate('user',array('name'=>$name),array('id'=>$id));
    echo json_encode($data);
}
    if(isset($_POST['tphone'])){

    $data =     $db->inlineupdate('user',array('phone'=>$phone),array('id'=>$id));
    echo json_encode($data);
}
}
mysql_close();
?>

我没有写完整个代码..因为它太大了......

0 个答案:

没有答案