javascript - Get data entered after inline editing and using it in AJAX to update table -
i trying execute inline editing in angularjs, update data entered in mysql table, new in angular , dont know how handle data entered , sending using ajax, in codes below: variables tid, tname, tphone
still empty after editing .. how can store new id (or name or phone) after inline editing send them database?
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 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(); } }); } }; });
and 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(); ?>
i didnt write whole code .. cause it's big ..
Comments
Post a Comment