1

I created a service to update a list. The call to do the insert is working fine, but when the data comes back and I try to update the list, I am getting the error undefined is not a function. That doesn't really tell me where the issue is, and I'm stumped.

Here is the call in the controller

$scope.createCategory = function (newCategory) {
    CategoryService.createCategory(newCategory)
        .then(function(category){
            $scope.categoryNames.push({
                asset_category_id: category.id , asset_type: category.name}
            );
         });
};

and here is the service:

createCategory: function(name){
    var params = 'categoryName' + '=' + name.categoryName + '&';
    var defObj = $q.defer();
    params += 'method' + '=' + 'createCategory';

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

    $http.post('cfc/category.cfc', params);
    $http.success(function(data){
        defObj.resolve(data);
    });
    return defObj.promise;
}

I'm guessing that the issue is at the .then, but i'm not totally sure. Any suggestions?

Adding View:

<div class="panel">
    <div class="col-xs-6">
    <table class="table">
        <thead>
        <tr>
            <th>#</th>
            <th>Category Name</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="category in categoryNames">
            <td>{{$index + 1}}</td>
            <td>{{category.asset_type}}</td>
            <td>
                <span class="glyphicon glyphicon-wrench" data-ng-click="editCategory($index)"></span>
            </td>
            <td>
                <span class="glyphicon glyphicon-remove" data-ng-click="removeCategory($index)"></span>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="col-xs-6">
    <div class="well">
        <div class="h4">Create Category</div>
        <div class="well">
            <form role="role" data-ng-submit="createCategory(newCategory)">
                <div class="form-group">
                    <label for="categoryName">Category Name</label>
                    <input type="text" class="form-control" id="categoryName" name="categoryName" placeholder="Category Name" data-ng-model="newCategory.categoryName"/>

                </div>
                <button type="submit" class="btn btn-primary btn-block">Add</button>
            </form>
        </div>
    </div>
</div>

Rob M
  • 1,007
  • 2
  • 17
  • 38

2 Answers2

1

The following should work. $http.post is returning a promise, but instead of a then, it has a success. That's tripped me up before. If you return that promise, your code in the controller should work correctly.

   createCategory: function(name){
        var params = 'categoryName' + '=' + name.categoryName + '&';
        params += 'method' + '=' + 'createCategory';

        $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

        return $http.post('cfc/category.cfc', params)
            .success(function(data){
                return data;
            });
    }
JakeRadakovich
  • 75
  • 7
  • Do I still have to use the `.then` in the controller? – Rob M May 13 '14 at 02:58
  • You can use then. Apparently the HttpPromise has both then and success. http://stackoverflow.com/q/16385278/3236336 – JakeRadakovich May 13 '14 at 03:01
  • it is working, and not throwing an error, but the list still isn't getting updated by the return. – Rob M May 13 '14 at 03:03
  • Can you hit a breakpoint set on the line with $scope.categoryNames = category;? Also, can you post the view? – JakeRadakovich May 13 '14 at 03:05
  • 1
    I've updated the controller code, to what it currently is. `$scope.categoryNames` is actually an array of objects, so I had to update had to push the new item into the it. – Rob M May 13 '14 at 03:18
  • i should note that doing the update to the controller still isn't effecting the updating of the list. – Rob M May 13 '14 at 03:32
  • 1
    Both `then()` and `success()` are available on the promise from `$http.post()`, but they pass different arguments to the callback. `then()` passes a response object, while `success()` is a shorthand that grabs the data from the response and passes it to the callback. Simplest thing you can do here is switch to `success()`. – Anthony Chu May 13 '14 at 05:09
0

first you dont even need $q

createCategory: function(name){
    var params = 'categoryName' + '=' + name.categoryName + '&';
    params += 'method' + '=' + 'createCategory';

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

    return $http.post('cfc/category.cfc', params);
}

second you might need to use $scope.$apply , or not.

.then(function(category){
    $scope.categoryNames = category;
    $scope.$apply('categoryNames');
});
Marc Kline
  • 9,399
  • 1
  • 33
  • 36
mpm
  • 20,148
  • 7
  • 50
  • 55