Angular js unable to post data using $http.post

Question

I have an angular app where i am trying to post some elements into a database. Here i am using a modal where i check some courses such that the checked courses will be posted using the $http.post Here is the function to post the data:

$scope.ok = function () {
              //$scope.subcategory.subcategory2 = [];
                for(var i = 0; i < $scope.selectedCourses.length; i++){
                    debugger
                  //$scope.subcategory.subcategory2.push({course: $scope.selectedCourses[i], term:"--",credit:"--",grade:"--"});
                  var variablesToSend = {
                                        "student": 2773951,
                                        "course_name": $scope.selectedCourses[i].course.course_name,
                                        "title": $scope.selectedCourses[i].course.title,
                                        "credit": 3,
                                        }
                    $http.post('/api/studentplannedcredit/', variablesToSend).then(function(response){
                        console.log(response);
                        //alert('post added');
                        //document.location.reload(true);

                    }, function(response){
                        console.log(response);
                        alert('Unable to add Course');
                    });             
                }
                $modalInstance.close();
            };

The error i am getting here is, when i calling the function, it gives me the following error:

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.2.8/$rootScope/inprog?p0=%24digest
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:78:12
    at beginPhase (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:12262:15)
    at Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:12048:11)
    at Scope.$delegate.__proto__.$apply (<anonymous>:855:30)
    at HTMLDivElement.<anonymous> (http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js:8:20385)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:2612:10
    at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:309:20)
    at HTMLDivElement.eventHandler (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:2611:5)
    at http://127.0.0.1:8000/static/js/app.js:161:7
    at deferred.promise.then.wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:10952:78) angular.js:9413
(anonymous function) angular.js:9413
$get angular.js:6832
$get.Scope.$apply angular.js:12051
$delegate.__proto__.$apply VM437152:855
(anonymous function) ui-bootstrap-tpls-0.10.0.min.js:8
(anonymous function) angular.js:2612
forEach angular.js:309
eventHandler angular.js:2611
(anonymous function) app.js:161
deferred.promise.then.wrappedErrback angular.js:10952
deferred.promise.then.wrappedErrback angular.js:10952
(anonymous function) angular.js:11078
$get.Scope.$eval angular.js:11949
$get.Scope.$digest angular.js:11775
$delegate.__proto__.$digest VM437152:844
$get.Scope.$apply angular.js:12055
$delegate.__proto__.$apply VM437152:855
done angular.js:7837
completeRequest angular.js:8020
xhr.onreadystatechange angular.js:7976

This is unrelated to your $http.post. You're calling $digest or $apply somewhere in your code while a digest cycle is already in progress — Mike Quinlan
– Mike Quinlan, Commented May 14, 2014 at 19:37
Kinda hard to tell with this code, probably something somewhere else. but probably something to do with wrapping your posts in a loop, I'd wrap your $http.post calls in $q.all() then you can have a singular .then(). — Jonathan Rowny
– Jonathan Rowny, Commented May 14, 2014 at 19:37

JoakimB · Accepted Answer · 2014-05-14 19:39:40Z

1

Iam not sure if it's somewhere in your example or just something you do wrong elsewhere. Down below is a working example of a POST in angular.

var config = {
    method: 'POST',
    url: '/api/studentplannedcredit/',
    data: variablesToSend 
};


$http(config)
.success(function(data, status, headers, config) {
    console.log(data);
})
.error(function(data, status, headers, config) {
    console.log(data);
});

PS: Dont POST for each loop.. that will hammer the API badly.. collect the data first and then send 1 POST only.

answered May 14, 2014 at 19:39

JoakimB

1,2062 gold badges14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ppff · Accepted Answer · 2014-05-14 19:41:44Z

0

I am assuming, $modalInstance is the issue here.

Try to run without

$modalInstance.close();

answered May 14, 2014 at 19:41

ppff

3233 gold badges6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular js unable to post data using $http.post

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related