angular.js $http.post not working - no error

Question

I'm trying to submit a new comment using $http. You might have guessed it from the title: it's not working. I tried the shore version and the long version, both fail. No console error.

This is my code:

$scope.comment = {};
$scope.comment["comment"] = message; // message defined somewhere else

$http.post('/api/items/'+$scope.item.id+'/comments', $scope.comment)
    .success(function(data, status, headers, config) {
         // this isn't happening:
         console.debug("saved comment", $scope.comment);
    })
    .error(function(data, status, headers, config) {
         // this isn't happening:
         console.debug("saved comment", $scope.comment);
    })
}

Anyone got any idea on how to make this work? Thanks!

UPDATE:

I'm doing it as a Jquery ajax call now, which is working fine. It'd be nice to get it to work with angular though. This is my JQuery code however:

            var request = $.ajax({
                url: '/api/items/'+$scope.item.id+'/comments',
                type: "POST",
                data: JSON.stringify($scope.comment),
                contentType: 'application/json; charset=utf-8',
                dataType: "json"
            });

            request.done(function(msg) {
                console.debug("saved comment", $scope.comment);
            });

            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
            });

If anyone has any ideas how to angularify this please tell me, would be nice to do it the proper way....

yes. console.debug after setting the comment logs the correct data. However $http.post doesn't seem to work. — Dine
– Dine, Commented Apr 30, 2013 at 12:20
posting to this url works, say from fiddler? and assuming idea with id 5 exists posting to this url works '/api/ideas/5/comments' ? — user554180
– user554180, Commented Apr 30, 2013 at 12:50
I checked in Charles Proxt and there doesn't seem to be a POST request happening... so I assume it's a problem with the frontend, not the backend? — Dine
– Dine, Commented Apr 30, 2013 at 13:39
Same error for me. $http.post fails silently, no error. Have tried about 10 different people's suggested syntax. — Matt J.
– Matt J., Commented Dec 6, 2013 at 1:04

dade · Accepted Answer · 2013-10-08 22:20:49Z

7

Have you tried specifically setting the Content-Type before making the request?

I had the same issue and setting Content-Type fixes it.

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

answered Oct 8, 2013 at 22:20

dade

3,6104 gold badges36 silver badges58 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:31:25Z

5

Maybe this will help you. I had similiar problem with get call : AngularJS $http not firing get call

I solved it with solution, found here https://github.com/angular/angular.js/issues/2794#issuecomment-18807158, so I wraped my call function with $scope.$apply.

$scope.$apply(function() {
                console.log('Klic na ID ' + data.context.id);
                $scope.commonController.getData('orgunit/' + data.context.id + '?jsonDepth=3')
                    .success(function(workpositionData,status,headers,config) {
                        console.log('Klic na ID ' + data.context.id + ' OK');
                        $scope.workPositions = workpositionData.workPositions;
                    }).error(function(data,status,headers,config) {
                        commonController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
                    });
            });

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Jul 18, 2013 at 5:25

Sobis

1,4054 gold badges22 silver badges30 bronze badges

1 Comment

Matthias Over a year ago

This makes sense. The linked page mentions that $http creates a promise, and promises are only resolved within the $digest cycle. @Dine, where does your code run? If it runs within a setTimeout or within a jQuery/DOM event listener function, then that's your problem. You need to call $scope.$apply(), which in turn triggers the $digest cycle.

kfis · Accepted Answer · 2013-04-30 17:44:46Z

2

I think, you just forgot some cruel ")" try

$http.post('/api/ideas/'+$scope.item.id+'/comments', $scope.comment)
   .success(function(data, status, headers, config) {
     // this isn't happening:
     console.debug("saved comment", $scope.comment);
   })  //<-- damn ")"
   .error(function(data, status, headers, config) {
     // this isn't happening:
     console.debug("saved comment", $scope.comment);
   }) //<--- damn ")"
 }

I did not test it yet, but I bet, this is the error regards

answered Apr 30, 2013 at 17:44

kfis

4,72925 silver badges19 bronze badges

2 Comments

Dine Over a year ago

This is a very valid point, unfortunately this is not the problem as it is only a typo which slipped into stackoverflow but is actually correct in my app (I corrected it in stackoverflow now). Would most likely have caused am error in the console. So yeah - still not working...

Prasad Over a year ago

Please Provide Us a Plunker .. where people can do something to Make it Working

user124722 · Accepted Answer · 2013-07-11 08:44:20Z

1

If you are using angular 1.1.4+ check this thread https://github.com/angular/angular.js/issues/2431.

Basically if you are calling $http outside of Angular context you need to wrap $http callback in $scope.$apply. For more details look into https://github.com/angular/angular.js/issues/2794#issuecomment-18807158

answered Jul 11, 2013 at 8:44

user124722

Comments

Joao Osorio · Accepted Answer · 2013-09-03 15:45:56Z

1

I was struggling with the same problem. The way I solved it was to use .then() and registering the success and error callbacks as arguments. In your case:

$http.post('/api/items/'+$scope.item.id+'/comments', $scope.comment)
  .then(
    // success callback
    function(response) {
      console.debug("success - saved comment", $scope.comment);
    },
    // error callback
    function(response) {
      console.debug("error - saved comment", $scope.comment);
   }
);

answered Sep 3, 2013 at 15:45

Joao Osorio

111 bronze badge

Comments

Andrew Dyster · Accepted Answer · 2013-05-08 04:49:19Z

0

You need to initialise the controller with the $http object. Same goes for the other Angular services you wish to use.

E.g.:

function myCtrl($scope, $http) {
  // controller code
}

answered May 8, 2013 at 4:49

Andrew Dyster

2,31820 silver badges23 bronze badges

1 Comment

Dine Over a year ago

I did inject the $http object. Thanks for the suggestion though.

Naveen · Accepted Answer · 2015-12-19 05:28:29Z

0

You can try.

Angular js post call:

$http({
        url:'/api/ideas/'+$scope.item.id+'/comments', $scope.comment,
        method : 'POST'
    }).success(function(data, status, headers, config){
    }).error(function(data, status, headers, config){
    });

Rest Controller:

@RequestMapping
    (value = "/api/ideas/{item_id}/comments/{comment}", method = RequestMethod.POST)
    @ResponseStatus(HttpStatus.OK)
    public void updateComments(@PathVariable String item_id,@PathVariable String comment) {
        }

edited Dec 19, 2015 at 5:28

Naveen

7773 gold badges18 silver badges42 bronze badges

answered May 25, 2013 at 18:55

user2230867

931 silver badge3 bronze badges

Comments

Vahid Barzegar · Accepted Answer · 2020-05-27 11:36:46Z

0

//set arg
var arg = { name: $scope.name,
           tel: $scope.tel} 
// config 
var req = {
                method: 'POST',
                url: '/pServices/sellers/addNew',
                headers: {'Content-Type': 'application/json'},
                data: arg
            }
//POST data to server 
$http(req).then(function(data, status, headers, config){
                if(data['data']['status'])
                 console.log('success') ;

            }, function(data, status, headers, config){
                 console.log(data['data']['message']) 
            });

answered May 27, 2020 at 11:36

Vahid Barzegar

1

1 Comment

Parisa Over a year ago

it would be better if you can add some explanation about your answer.

Piotr Skotnicki · Accepted Answer · 2014-08-30 20:55:17Z

angular.module('RestService', [

]).factory('$RestService', [
    '$http', 'ApiUrl',
    function ($http, ApiUrl) {
        return {          
            Functioname: function (request) {
                var Requesturl = ApiUrl + "/Functionname";//www.test.com/getuserdata
                return this.Post(Requesturl, request);//request :parameter which you want to pass in post request
            },
            Post: function (ResultUrl, RequestParameterData) {
                var PostResponse = $http({
                    url: ResultUrl,
                    method: "POST",
                    dataType: "",
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
                    data: RequestParameterData
                });
                return PostResponse;
            },
            Get: function (ResultUrl, RequestParameterData) {
                var PostResponse = $http({
                    url: ResultUrl,
                    method: "GET",
                    dataType: "",
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
                    data: RequestParameterData
                });
                return PostResponse;
            }

        };
    }


]);

Collectives™ on Stack Overflow

angular.js $http.post not working - no error

9 Answers 9

Comments

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related