Why Success or Error callback function not executing properly for $http.post in angularjs

Question

I'm trying to communicate with server using following code.

$scope.Save = function () {
        $scope.loading = true;

        if ($scope.roleSetupModel.RoleID === "") {
            // Save
            //$scope.loading = true;
            $http.post('/SecurityModule/RoleSetup/AddRole', JSON.stringify($scope.roleSetupModel))
                .success(function (response) {
                    $scope.loading = false;
                    $('#addModal').modal('hide');
                    $scope.BindDataToGrid();
                    alert("Success");
                    toastr.success(response.Message);

                })
                .error(function (response) {
                    $scope.loading = false;
                    alert("Fail");
                    toastr.error(response.Message);

                });

        }
        else {
            $http.post('/SecurityModule/RoleSetup/EditRole',
                    JSON.stringify(convArrToObj($scope.roleSetupModel)))
                .success(function (response) {
                    $('#addModal').modal('hide');
                    $scope.loading = false;
                    toastr.success(response.Message);
                    $scope.BindDataToGrid();
                })
                .error(function (data) {
                    $scope.loading = false;
                    toastr.error(response.Message);
                });

        }
    }

But I'm getting wired behavior. The link is being hit everytime, I put a debugger there, but even before completing the request my page getting kind of refreshed making my model empty with out entering the success or error call back. I know a little about the promise object but couldn't make sense. What I'm doing wrong here?

where does Save() get called from? Show form html basics. Sounds like form is submitting through default process and page is reloading — charlietfl
– charlietfl, Commented Feb 8, 2016 at 4:42

charlietfl · Accepted Answer · 2016-02-08 04:54:01Z

2

My guess is you aren't binding $scope.Save() to ng-submit of <form> and have it being triggered by a submit button, or you have not followed the docs for forms

If form is set up with:

<form name="formScopeName" ng-submit="Save()" novalidate>

Your $http should work fine. However if you have action set on form angular interprets that as you want to submit without ajax nd use default browser process. So make sure action attribute doesn't exist.

Also note there is no reason to stringify the data yourself. This will be done automatically by $http internally. This could be causing error perhaps

You can also pass in $event for extra protection and then preventDefault. Generally this isn;t necessary however.

ng-submit="Save($event)"

JS

$scope.Save = function (event){
    event.preventDefult();
     .....

edited Feb 8, 2016 at 4:54

answered Feb 8, 2016 at 4:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

Badhon Jain Over a year ago

Absolutely spot on. Thanks.

Badhon Jain Over a year ago

I removed the ng-submit from the form declaration and put ng-click to the save button which solved the problem.

charlietfl Over a year ago

but what if user submits by keyboard? Will bypass your ng-click and you will have same problem all over again

Collectives™ on Stack Overflow

Why Success or Error callback function not executing properly for $http.post in angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related