I have a peculiar problem, that, due to my lack of experience with Angular and JS, I appear unable to solve.
I have a DB connection class called general DB, which is called by a PHP script 'action.php'. 'Action.php' is called via the $http method in JS. Because of the need for flexibility of input from the user end, the processing functions rely on variables such as 'data' for the submitted data. The JS allows for three modes of user interaction, input, edit, delete. The peculiarity of my current difficulty is that if I attempt to input data straight away, it fails (with the custom error message 'Some problems occurred, please try again.'); however, if I click on edit first, then it allows me to add new records. Both edit and delete fail, although they do not display a message, merely the red box where such a message should have appeared (edit).
I am using:
error_reporting(E_ALL)
in the relevant PHP code but receive no PHP errors. I have also found that the JS appears to have access to all the values that it is gathering, through console.log(). Presumably, since it's not working, I have missed something important, please help me find it!
Also, currently existing records in the database are displaying correctly and as expected.
JS:
//define application
angular.module("crudApp", []).controller("userController", function($scope, $http){
$scope.cats = [];
$scope.tempUserData = [];
//function to get records from the database
$scope.getRecords = function(){
$http.get('action.php', {
params:{
'type':'view'
}
}).success(function(response){
if(response.status == 'OK'){
$scope.cats = response.records;
}
});
};
//function to insert or update data in database
$scope.saveCats = function(type){
var data = $.param({
'data':$scope.tempUserData,
'type':type
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
};
$http.post("action.php", data, config).success(function(response){
if (response.status == 'OK'){
if (type == 'edit'){
console.log($scope.cats[$scope.index].uid = $scope.tempUserData.uid);
console.log($scope.cats[$scope.index].Categories = $scope.tempUserData.Categories);
}
else{
$scope.cats.push({
//uid:response.uid,
Categories:response.data.Categories
});
}
$scope.catForm.$setPristine();
$scope.tempUserData = {};
$(".formData").slideUp();
$scope.messageSuccess(response.msg);
}
else {
console.log($scope.messageError(response.msg));
}
});
};
//function to add data
$scope.addCat = function(){
$scope.saveCats('add')
};
//function to edit data
$scope.editCat = function(cat){
console.log($scope.tempUserData = {
uid: cat.uid,
Categories: cat.Categories
});
$scope.index = $scope.cats.indexOf(cat);
$(".formData").slideDown();
};
// function to update user data
$scope.updateCat = function(){
$scope.saveCats('edit');
};
//function to delete data
$scope.deleteCat = function(cat){
var conf = confirm("Are you sure you want to delete this Category?");
if (conf == true){
var data = console.log($.param({
'id': cat.uid,
'type': 'delete'
}));
var config = {
headers : {
'Content-Type' : 'application/x-www-form-urlencoded;charset=utf-8'
}
};
$http.post("action.php", data, config).success(function(response){
if (response.status == 'OK'){
var index = $scope.cats.indexOf(cat);
$scope.cats.splice(index,1);
$scope.messageSuccess(response.msg);
}
else{
console.log($scope.messageError(response.msg));
}
});
}
};
//function: display success message
$scope.messageSuccess = function(msg){
$('.alert-success > p').html(msg);
$('.alert-success').show();
$('.alert-success').delay(5000).slideUp(function(){
$('.alert-success > p').html('');
});
};
//function: display error message
$scope.messageError = function(msg){
$('.alert-danger > p').html(msg);
$('.alert-danger').show();
$('.alert-danger').delay(5000).slideUp(function(){
$('.alert-danger > p').html('');
});
};
});
HTML:
<div class="container well" ng-controller="userController" ng-init="getRecords()">
<div class="row cinzel">
<div class="panel panel-default users-content">
<div class="panel-heading">
Add Categories <a href="javascript:void(0);" class="glyphicon glyphicon-plus" onClick="$('.formData').slideToggle();"></a>
</div>
<div class="alert alert-danger none"><p></p></div>
<div class="alert alert-success none"><p></p></div>
<div class="panel-body none formData">
<form class="form" name="catForm" method="POST" action="">
<div class="form-group">
<label>Category</label>
<input type="text" class="form-control" name="Categories" ng-model="tempUserData.Categories" />
</div>
<a href="javascript:void(0);" class="btn btn-warning" onClick="$('.formData').slideUp();">Cancel</a>
<a href="javascript:void(0);" class="btn btn-success" ng-hide="tempUserData.uid" ng-click="addCat()">Add Category</a>
<a href="javascript:void(0);" class="btn btn-success" ng-hide="!tempUserData.uid" ng-click="updateCat()">Update Category</a>
</form>
</div>
<div class="panel-heading">
View Categories <a href="javascript:void(0)" class="glyphicon glyphicon-plus" onClick="$('.viewCats').slideToggle();"></a>
</div>
<div class="panel-body none viewCats">
<table class="table table-striped">
<tr>
<th width="5%">#</th>
<th width="20%">Categories</th>
</tr>
<tr ng-repeat="cat in cats | orderBy:'-uid'">
<td>{{$index + 1}}</td>
<td>{{cat.Categories}}</td>
<td>
<a href="javascript:void(0);" class="glyphicon glyphicon-edit" ng-click="editCat(cat)"></a>
<a href="javascript:void(0);" class="glyphicon glyphicon-trash" ng-click="deleteCat(cat)"></a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
action.php:
<?php
error_reporting(E_ALL);
require_once("class_lib.php");
use App\mainClasses\GeneralDB;
$db = new GeneralDB();
$tblName = 'cats';
if(isset($_REQUEST['type']) && !empty($_REQUEST['type'])){
$type = $_REQUEST['type'];
switch($type){
case "view":
$records = $db->getRows($tblName);
if($records){
$data['records'] = $db->getRows($tblName);
$data['status'] = 'OK';
}else{
$data['records'] = array();
$data['status'] = 'ERR';
}
echo json_encode($data);
break;
case "add":
if(!empty($_POST['data'])){
$userData = array(
'Categories' => $_POST['data']['Categories']
);
$insert = $db->insert($tblName,$userData);
if($insert){
$data['data'] = $insert;
$data['status'] = 'OK';
$data['msg'] = 'User data has been added successfully.';
}else{
$data['status'] = 'ERR';
$data['msg'] = 'Some problem occurred, please try again.';
}
}else{
$data['status'] = 'ERR';
$data['msg'] = 'Some problem occurred, please try again.';
}
echo json_encode($data);
break;
case "edit":
if(!empty($_POST['data'])){
$userData = array(
'Categories' => $_POST['data']['Category']
);
$condition = array('uid' => $_POST['data']['id']);
$update = $db->update($tblName,$userData,$condition);
if($update){
$data['status'] = 'OK';
$data['msg'] = 'User data has been updated successfully.';
}else{
$data['status'] = 'ERR';
$data['msg'] = 'Some problem occurred, please try again.';
}
}else{
$data['status'] = 'ERR';
$data['msg'] = 'Some problem occurred, please try again.';
}
echo json_encode($data);
break;
case "delete":
if(!empty($_POST['id'])){
$condition = array('id' => $_POST['id']);
$delete = $db->delete($tblName,$condition);
if($delete){
$data['status'] = 'OK';
$data['msg'] = 'User data has been deleted successfully.';
}else{
$data['status'] = 'ERR';
$data['msg'] = 'Some problem occurred, please try again.';
}
}else{
$data['status'] = 'ERR';
$data['msg'] = 'Some problem occurred, please try again.';
}
echo json_encode($data);
break;
default:
echo '{"status":"INVALID"}';
}
}
PHP DB connection:
class GeneralDB extends PDOconnect {
private $sql;
private static $db;
/**
* @param $table
* @param array $conditions
* @return array|bool|int|string
*/
public function getRows($table, $conditions = array()) {
$i=0;
self::$db = PDOconnect::newPDO();
$this->sql = 'SELECT';
$this->sql .= array_key_exists("select", $conditions)?$conditions['select']:'*';
$this->sql .= ' FROM '.$table;
if (array_key_exists("where", $conditions)) {
$this->sql .= ' WHERE ';
foreach ($conditions['where'] as $key => $value) {
$pre = ($i>0)?' AND ':'';
$this->sql .= $pre.$key." = '".$value."'";
$i++;
}
}
if (array_key_exists("order_by", $conditions)){
$this->sql .= ' ORDER BY '.$conditions['order_by'];
}
if (array_key_exists("start", $conditions)&&array_key_exists("limit", $conditions)){
$this->sql .= ' LIMIT '.$conditions['start'].','.$conditions['limit'];
}
elseif (!array_key_exists("start", $conditions)&&array_key_exists("limit", $conditions)){
$this->sql .= ' LIMIT '.$conditions['limit'];
}
$query = self::$db->prepare($this->sql);
$query->execute();
if (array_key_exists("return_type",$conditions)&&$conditions['return_type']!='all') {
switch($conditions['return_type']){
case 'count':
$data = $query->rowCount();
break;
case 'single':
$data = $query->fetch(PDO::FETCH_ASSOC);
break;
default:
$data = '';
}
}
else {
if ($query->rowCount() > 0) {
$data = $query->fetchAll(PDO::FETCH_ASSOC);
}
}
return !empty($data)?$data:false;
}
public function insert($table,$data) {
if (!empty($data)&&is_array($data)) {
self::$db = PDOconnect::newPDO();
$columns = '';
$values = '';
$i = 0;
$columnString = implode(',', array_keys($data));
$valueString = ":".implode(",:",array_keys($data));
$sql = "INSERT INTO ".$table." (".$columnString.") VALUES (".$valueString.")";
$query = self::$db->prepare($sql);
foreach ($data as $key=>$val) {
$val = htmlspecialchars(strip_tags($val));
$query->bindParam(':'.$key,$val);
}
$insert = $query->execute();
if ($insert) {
$data['id'] = self::$db->lastInsertId();
return $data;
}
else {
return false;
}
}
else {
return false;
}
}
public function update($table,$data,$conditions) {
if (!empty($data)&&is_array($data)) {
self::$db = PDOconnect::newPDO();
$colValSet = '';
$whereSQL = '';
$i = 0;
foreach($data as $key=>$val) {
$pre = ($i>0)?', ':'';
$val = htmlspecialchars(strip_tags($val));
$colValSet .= $pre.$key."='".$val."'";
$i++;
}
if (!empty($conditions)&&is_array($conditions)) {
$whereSQL .= ' WHERE ';
$i = 0;
foreach ($conditions as $key=>$value) {
$pre = ($i>0)?' AND ':'';
$whereSQL .= $pre.$key." = '".$value."'";
$i++;
}
}
$sql = "UPDATE ".$table." SET ".$colValSet.$whereSQL;
$query = self::$db->prepare($sql);
$update = $query->execute();
return $update?$query->rowCount():false;
}
else {
return false;
}
}
public function delete($table,$conditions) {
self::$db = PDOconnect::newPDO();
$whereSQL = '';
$i = 0;
if (!empty($conditions)&&is_array($conditions)) {
$whereSQL .= ' WHERE ';
foreach ($conditions as $key=>$value) {
$pre = ($i>0)?' AND ':'';
$whereSQL .= $pre.$key." = '".$value."'";
$i++;
}
}
$sql = "DELETE FROM ".$table.$whereSQL;
$delete = self::$db->exec($sql);
return $delete?$delete:false;
}
}
