knockout : Ajax request abort

Question

I want to prevent previous ajax request when new request is running. I do this like below code. But, it's not working.

I added code in beforeSend() function for abort previous request. But, that's not working.

Please help me to solve this.

jQuery :

return Component.extend({
    defaults: {
        changeTextValue: ko.observable(),
        currentRequest: ko.observable(),
        anotherObservableArray: [],
        subscription: null,
        tracks: {
            changeTextValue: true
        }
    },
    initialize: function() {
        this._super();
    },
    doSomething: function(config) {
        var self = this;
        if (this.subscription)
            this.subscription.dispose();

        this.subscription = this.changeTextValue.subscribe(function(newValue) {
            this.currentRequest = $.ajax({
                url: urlBuilder.build('abc/temp/temp'),
                type: 'POST',
                data: JSON.stringify({
                    'searchtext': newValue
                }),
                global: true,
                contentType: 'application/json',
                beforeSend: function(jqXHR) {
                    console.log("before Ajax send");
                    console.log(this.currentRequest);
                    if (this.currentRequest != null) {
                        this.currentRequest.abort();
                    }
                },
                success: function(response) {
                    var json_data = JSON.parse(response);
                    self.autocompleteData.removeAll();
                    $.each(json_data, function(key, val) {
                        self.autocompleteData.push({
                            productID: val.productID
                        });
                    });
                },
                error: function(jqXHR, exception) {
                    alert("Not OK!")
                }
            });
        });
    },
});
ko.applyBindings(new CeremonyViewModel());

Ray · Accepted Answer · 2018-09-13T12:07:20.763

1

So I'm guessing you want to cancel the previous request when the subscribe function is called again, correct?

In that case, try aborting it if the subscribe is called again.

return Component.extend({
    defaults: {
        changeTextValue: ko.observable(),
        currentRequest: null,
        anotherObservableArray: [],
        subscription: null,
        tracks: {
            changeTextValue: true
        }
    },
    initialize: function() {
        this._super();
    },
    doSomething: function(config) {
        var self = this;
        if (this.subscription)
            this.subscription.dispose();

        this.subscription = this.changeTextValue.subscribe(function(newValue) {
            if (self.currentRequest) {
                self.currentRequest.abort();
            }
            self.currentRequest = $.ajax({
                url: urlBuilder.build('abc/temp/temp'),
                type: 'POST',
                data: JSON.stringify({
                    'searchtext': newValue
                }),
                global: true,
                contentType: 'application/json',
                success: function(response) {
                    var json_data = JSON.parse(response);
                    self.autocompleteData.removeAll();
                    $.each(json_data, function(key, val) {
                        self.autocompleteData.push({
                            productID: val.productID
                        });
                    });
                },
                error: function(jqXHR, exception) {
                    alert("Not OK!")
                }
            });
        });
    },
});
ko.applyBindings(new CeremonyViewModel());

edited Sep 13 '18 at 12:07

answered Sep 13 '18 at 09:31

Ray

3,864
7
24
36

Not working :( kotemplate.js:96 Uncaught TypeError: self.currentRequest.abort is not a function – Keval Mehta Sep 13 '18 at 10:15
Can you please check and give me other solution if working ? – Keval Mehta Sep 13 '18 at 10:34
hi.. unfortunately I cannot tell further what the solution might be without debugging the code myself. Any chance you can give me the zip somehow? – Ray Sep 13 '18 at 10:35
1

the problem is that you initialise currentRequest as ko.observable() => which isnt null but neither has a function called abort(). you should change the intialisation from currentRequest: ko.observable(), to currentRequest: null – Marius Junak Sep 13 '18 at 12:06
@MariusJunak oh yes, good point, I copied that without noticing. – Ray Sep 13 '18 at 12:07
@KevalMehta could you try again with that line updated? – Ray Sep 13 '18 at 12:08
Hello Ray. can you please check my new question? – Keval Mehta Sep 14 '18 at 06:59
Hi @Ray. Can you please help me here ? https://stackoverflow.com/questions/54307799/knockout-push-value-in-ko-observable-array-with-dynamic-key – Keval Mehta Jan 22 '19 at 11:56

knockout : Ajax request abort

1 Answers1