CODEWITHSUNDEEP
javascripthtmlangularjsresthttp
julien carax
julien carax

Reputation: 335

$http.post gives Uncaught TypeError: Cannot read property 'post' of undefined in angularjs

I am new to angularjs, I am trying to make a $http.post call . Here is my html code :

<div class="simple-controller" ng-controller="Simple.SimpleController">

    <button type="button" id="create" name="create" data-toggle="modal"
        data-target="#myModal" style="margin-left: 45%; margin-bottom: 1%; margin-top: 2%">CREATE</button>
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Details</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="usr">Name:</label> <input type="text"
                            class="form-control" id="usr">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Service:</label> <input type="text"
                            class="form-control" id="service">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="addData()" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

I am trying to make a post call to a rest service locally with name and service input type as path params. So my url should look like this http://localhost:8181/cxf/authorization/addData/Siddhu/jhg

Here is my js code for making the post call :

function addData($scope, $http) {
    var name = document.getElementById("usr").value;
    var service = document.getElementById("service").value;
    var url = 'http://localhost:8181/cxf/authorization/addData';
    alert('URL ==== '+url);
    $http.post(url,{name:name, service:service})
    .success(function(data) {
        $scope.data = data;
        alert('THE DATA IS === '+$scope.data);
    });
}

I get Uncaught TypeError: Cannot read property 'post' of undefined error.

Can anyone show me the correct way to make the call ?

Upvotes: 0

Views: 646

Answers (2)

julien carax
julien carax

Reputation: 335

This is how I solved the problem for those who seek the code. Instead of onclick I added ng-click directive :

<button type="button" ng-click="addData()" class="btn btn-primary">Save</button>

And the code for my function :

$scope.addData = function() {
        var name = $scope.usr;
        var service = $scope.service;
        var url = 'http://localhost:8181/cxf/authorization/addData/'+name+'/'+service;
        $http.post(url)
        .success(function(data) {
            if(data == 'Updated'){
                fetchData();
                $('#myModal').modal("hide");
            }
            else{
                alert("Details not added");
                $('#myModal').modal("hide");
            }


        });
    }

Upvotes: 0

Graham S
Graham S

Reputation: 176

Your addData function requires 2 parameters ($scope and $http) but when it is called from the html you are not passing either in.

I suspect you have wired in the $http service into your controller, but then are superseding that with the method parameter.

Upvotes: 2

Related Questions