$http is not a function error in ag-grid

Question

I am using Angular Grid (ag-grid) to display data. In my table, whenever user adds a comment by inline editing, i intend to make a rest call and save comment in DB. I have put $http thing to make rest call in newValueHandler. In debugger i see that newValueHandler is invokded but $http is undefined. And then i get the error: Uncaught TypeError: $http is not a function

function CompletedActionsCtrl($scope, $http) {
    var columnDefs = [{
        headerName: "Comments",
        field: "comments",
        width: 180,
        filter: 'text',
        editable: true,
        newValueHandler:addCommentHandler,
        valueGetter: function (params) {
            if (params.data.comments != null) {
                return params.data.comments[0];
            }
        }
    }]


function addCommentHandler(params,$http){
    var url = "./postComment";
    $http({method: 'GET',url: url
  }).then(function successCallback(response) {}, function errorCallback(response) {});}


//==Controller invoker==
var app = angular.module('app', ['ngRoute', 'agGrid']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/completed_actions', {
        templateUrl: 'completed_actions_partial.html',
        controller: CompletedActionsCtrl
    });
}]);

Seems to be a trivial task, and i am sure i am missing something basic.

P.S. New to Javascript and angularjs.

== Code Flow Explanation == When user hits completed actions tab, CompletedActionsCtrl is invoked by routing. Inside this controller, a grid is prepared and rendered. Now when user edits the comment, and submits it, newValueHandler is invoked which is function addCommentHandler

== Update == Got it working by instead of calling a private function as handler, defined an anonymous function.

So removed this ->

newValueHandler:addCommentHandler,

And Added this ->

newValueHandler:function(params){
                var url = "./postComment";
                $http({method: 'GET',url: url})
                    .then(function successCallback(response) {},
                        function errorCallback(response) {});},

But the problem is that i need to have this handler at many places, and this approach will cause lot of code duplication. Any better ideas?

Where is the controller code, from where you call that function? — michelem, Nov 09 '15 at 07:44
did you tried this to pass those as the parameters? `controller: ["$scope", "$http", CompletedActionsCtrl($scope, $http)]` — hsynlms, Nov 09 '15 at 12:44
follow this link might be helpful for you, it passes `apitoken` argument to another one : https://docs.angularjs.org/guide/providers#service-recipe — hsynlms, Nov 17 '15 at 14:28

score 1 · Answer 1 · answered Nov 09 '15 at 07:45

1

Remove $http from your function, the parameter which you have added on your addCommentHandler function is vanishing the existence $http service.

Code

function addCommentHandler(params){ //<-- removed $http paramter function.
    var url = "./postComment";
    $http({method: 'GET',url: url
  })
  .then(function successCallback(response) {}, 
     function errorCallback(response) {});
}

answered Nov 09 '15 at 07:45

Pankaj Parkar

134,766
23
234
299

Thanks. But i am still getting the error. `Uncaught ReferenceError: $http is not defined` – rajya vardhan Nov 09 '15 at 08:25

score 1 · Answer 2 · answered Nov 09 '15 at 07:47

1

Remove $http from method declaration, you are trying to inject a angular service to a private method!

answered Nov 09 '15 at 07:47

macrog

2,085
1
22
30

Thanks. But i am still getting the error. `Uncaught ReferenceError: $http is not defined` – rajya vardhan Nov 09 '15 at 08:41
1

to use `$http` angularjs service you need to inject it into controller under this method is used, show me you controller code please ? – macrog Nov 09 '15 at 08:43
Thanks! Added it in the Qs. plz see the code under `//==Controller invoker==` and Code Flow Explanation. – rajya vardhan Nov 09 '15 at 08:56
1

I think your issue here is the way you did your controller, `CompletedActionsCtrl` have no idea what $http is, check plz this [answer](http://stackoverflow.com/a/17954031/3033318) how to declare a controller, then in [] of controller you can inject a angularjs services like $http and use them in your function. – macrog Nov 09 '15 at 09:10
But i am injecting `$http` in `CompletedActionsCtrl`. Also, if i use `$http` inside this controller then also it works fine. Problem is i can't use `$http` inside a private function(`addCommentHandler` in this case) called from `CompletedActionsCtrl`. – rajya vardhan Nov 09 '15 at 10:02
but you need to add this under `app.controller('CompletedActionsCtrl', function($scope, $http) { yourFunction(){ // here now you have $http available } });` – macrog Nov 09 '15 at 11:20

$http is not a function error in ag-grid

2 Answers2