How to prevent sending duplicate request with a single click in AngularJs

Question

I have an angularJs application that has an api call with a click on a link . but everytime i click on the link it sends 2 same api calls to the server. Why this occurs and how can i resolve this.

my service is like: SomethingService

 function getData() {
    return apiSettings.getApiInformation().then(function (response) {
        var url = response.data.Url + "/odata/Something?$expand=Something";

            var data = {
                url: url,
                type: "GET",
                token: response.data.Token,
                data: {},
                async: true,
                cache: false,
                headers: {
                         "accept": "application/json; charset=utf-8",
                         'Authorization': 'Bearer ' + response.data.Token
                       },
                dataType: "json",
                success: {},
                error: {},
                complete: {},
                fail:{}
            };
            return $http(data);
    });   
}

Api Settings :

angular.module('myApp.services')
.factory('apiSettings', apiSettings);

apiSettings.$inject = ['$http'];

function apiSettings($http) {
    return {
            getApiInformation: function () {
               return $http.get(baseUrl+ '/api/GetApiInformation', {cache: true});
            }
    }

}

SomethingController:

var vm = this;
function getSlots(filterCriteria, selectedValue) {

    somethingService.getData().then(function (response) {
        if (response && response.value.length > 0) {               
            vm.someData = response.value;
        }
    });

View: clicking on this link calls getSlots that sends duplicate request

 <a ui-sref="something" class="action-icons" id="slotNav"><i class="fa fa-square-o fa-fw"></i>
something
</a>

this view displays data

<div ng-repeat="data in vm.someData">
        <p> {{data.Name}}</p>
 </div>

Issue: For a single trigger browser sends duplicate requests like the following. the first call doesn't have callback but the second call has callback:

someuls?$expand=something&_=1432722651197   
someuls?$expand=something&_=1432722651197

Which call is being duplicated odata/something or api/GetApiInfo..? And why are you using both angular's $http and jQuery's $.ajax? — Brocco
– Brocco, Commented May 27, 2015 at 11:37
odata/something is being duplicated. For every odata get call there are 2 calls completed. every other things are works fine. It does the same thing when i use $http for both. — Sarmin Akter
– Sarmin Akter, Commented May 27, 2015 at 11:39
The first thing I would change is the odata/something call to use angular's $http service. $http lives within angular's domain (in regards to scope) so it knows when to trigger the digest loop which is what drives angular (including data binding) — Brocco
– Brocco, Commented May 27, 2015 at 11:42
It seems getSlots is being called twice, you need it look into how it is being called. This could be the issue. — Arief Shah
– Arief Shah, Commented May 28, 2015 at 7:34

Community · Accepted Answer · 2017-05-23 11:51:29Z

0

I had a similar problem which I fixed by checking this answer. I had declared "ng-controller" in HTML as well as routed to it using routeProvider. Fixed the issue by removing the "ng-controller" property in HTML.

Hope this helps.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 25, 2016 at 9:20

Shiva

531 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

How to prevent sending duplicate request with a single click in AngularJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related