getting error while saving the record in angular with php.

Question

Currently i am doing project in angular.js application. I am using server as php. in that while saving the record in angular js, I am getting error. I have upload my code below.

HTML CODE:

<div  ng-controller="theaterController">
<div class="col-md-12" ng-if="isCreating">
<form class="form-horizontal" name="saveForm" method="post">
    <h4>Create</h4>
    <p class="danger">{{error}}</p>
    <p class="success">{{msgs}}</p>
    <div class="form-group">
        <label for="theaterName" class="col-md-offset-2 col-sm-2 control-label">Name</label>
        <div class="col-sm-5" style="margin-bottom:10px;">
          <input type="text" name="theatername" class="form-control" id="theaterName" placeholder="Enter theater name" ng-modal="theatername" required>
        </div>
        <div class="col-md-offset-4 col-sm-8">
          <input type="submit" class="btn btn-primary btn-xs" data-ng-click="submitForm()" id="submit">
          <input type="button" class="btn btn-primary btn-xs" ng-click="cancelCreating()" id="Cancel" value="Cancel">
        </div>  
     </div>
</form>

Angular.js code:

app.controller('theaterController', ['$scope', '$http', function ($scope, $http) {

$scope.message = 'Theater';
$http.get('ajax/theater-master.php',{"getElement": "get_data"}).success(    function (response){
    //console.log(response);
    $scope.theaters = response;
});

//save form code;
$scope.submitForm = function (){
    var url = 'ajax/theater-master-save.php';
    var d1 = {'name': $scope.theatername };
     $http.post(url, d1
    ).success(function(data, status, headers, config) {
        console.log(data);
        if (data.msg != '')
        {
            $scope.msgs.push(data.msg);
        }
        else
        {
            $scope.errors.push(data.error);
        }
    }).error(function(data, status) { // called asynchronously if an error occurs
// or server returns response with an error status.
        $scope.errors.push(status);
    });
}



}]);

theater-master-save.php:

<?php 
$data = json_decode(file_get_contents("php://input"));
$usrname = mysql_real_escape_string($data->name);
echo $usrname ;
$query = mysql_query("INSERT INTO `theater` (theater) VALUES ("' . $usrname . '")");
if($query){
    $arr = array('message' => 'Theater master created successfully', 'error' => '');
    $arrjson = json_encode($arr);
    echo $arrjson;
}else{
    $arr = array('message' => '', 'error' => 'error in inserting record');
    $arrjson = json_encode($arr);
    echo $arrjson;
}

?>

ERROR:

Uncaught Error: Bootstrap's JavaScript requires jQuery
script.js:52 <br />
<b>Notice</b>:  Undefined property: stdClass::$name in    <b>E:\xampp\htdocs\angular-ticketbooking\ajax\theater-master-save.php</b> on    line <b>3</b><br />

angular.min.js:107 TypeError: Cannot read property 'push' of undefined
at script.js:55
at angular.min.js:87
at angular.min.js:119
at n.$eval (angular.min.js:133)
at n.$digest (angular.min.js:130)
at n.$apply (angular.min.js:133)
at h (angular.min.js:87)
at K (angular.min.js:91)
at XMLHttpRequest.z.onload (angular.min.js:93)(anonymous function) @     angular.min.js:107(anonymous function) @ angular.min.js:80(anonymous function) @    angular.min.js:119n.$eval @ angular.min.js:133n.$digest @   angular.min.js:130n.$apply @ angular.min.js:133h @ angular.min.js:87K @    angular.min.js:91z.onload @ angular.min.js:93

I am new to angular js, I am just practising angular.js by trying crud operation in angular. I have just tried this above code, I am getting error like this. Please tell me where i am going worng. Thanks in advance

Answer 1

Looks like you are getting two errors and you have a typo in your HTML:

1) "Uncaught Error: Bootstrap's JavaScript requires jQuery"

This is because Bootstrap requires jQuery and you have not added the jQuery library to your HTML page. You need to include jQuery in your HTML page by adding the following script tag: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

2) "TypeError: Cannot read property 'push' of undefined"

This is because you are trying to push something into $scope.msgs but Angular does not what $scope.msgs is because you have not defined it. You need to define $scope.msgs in your Controller before you can add something to it like so: $scope.msgs = []; You also need to define $scope.errors in the same way.

3) Use ng-model not ng-modal

In your HTML you have a typo. You have typed ng-modal instead of ng-model and this is why the value is not getting sent to the server. You need to change your HTML to: <input type="text" name="theatername" class="form-control" id="theaterName" placeholder="Enter theater name" ng-model="theatername" required>