Automatically canceling reuest jqGrid on version 4.3.1

Question

I have checked below link, But solution given only support after version 4.3.2 Currently i am using the version 4.3.1 and it doesn't support the trigger handler. is there any other way i can solve this issue in version 4.3.1. Because Currently i can't upgrade to newer version. Changing the jqgrid core js file also fine.

I need to solve the below problem, the same question asked already which is i given in the link also

if the user makes another filter selection before the response comes back, the grid does not cancel the existing request, nor does it submit a new one, so at some point after the user makes the second selection, the grid updates to show the response for the first selection. Furthermore, the grid auto-updates when you change the filter selection, so to get it to show the data you wanted, you have to change your selection to something else, wait for that to load, and then change it back.

Automatically canceling jqGrid request

Oleg · Accepted Answer · 2019-09-19T16:05:08.837

1

To be able to cancel underlying Ajax request, which will be sent by jqGrid, one needs to have access to jqXHR object, which is a superset of the XMLHTTPRequest object. The object has abort() method, which can be used to cancel pending Ajax request.

9 yeas ago I posted the answer, where I described how one can get access to jqXHR object even in very old version of jqGrid. If you work with jqGrid 4.3.1 then you can do the following:

1) add following callbacks to your code or to modify existing callbacks loadBeforeSend, beforeProcessing and loadError to initialize or to clear new jqXhr parameter:

loadBeforeSend: function (jqXhr) {
    this.p.jqXhr = jqXhr;
    return true;
},
beforeProcessing: function () {
    this.p.jqXhr = null;
    return true;
},
loadError: function () {
    this.p.jqXhr = null;
}

2) add new method abortAjaxRequest to jqGrid using the following code

$.jgrid.extend({
    abortAjaxRequest: function () {
        return this.each(function () {
            if (this.p.jqXhr != null) {
                this.p.jqXhr.abort();
            }
            this.grid.endReq.call(this);
        });
    }
});

After that you can use code like $("#list").jqGrid("abortAjaxRequest"); to cancel pending Ajax requests. If you need to test, whether a pending Ajax request exist, you can test whether $("#list").jqGrid("getGridParam", "jqXhr"); is not null.

UPDATED: The method endReq isn't saved in this.grid. The correct code of abortAjaxRequest could be the following:

$.jgrid.extend({
    abortAjaxRequest: function () {
        return this.each(function () {
            if (this.p.jqXhr != null) {
                this.p.jqXhr.abort();
            }
            this.grid.hDiv.loading = false;
            $("#lui_" + $.jgrid.jqID(this.p.id)).hide();
            $("#load_" + $.jgrid.jqID(this.p.id)).hide();
        });
    }
});

edited Sep 19 '19 at 16:05

answered Sep 18 '19 at 07:59

Oleg

220,925
34
403
798

Hi @oleg, Thanks for sharing, However we use the minified version of the jqgrid, we get the following error saying endReq is not defined – karthickeyan Sep 18 '19 at 22:57
the endReq method converted to aa = function() { a.grid.hDiv.loading =false; switch (a.p.loadui) { case "enable": b("#load_" + b.jgrid.jqID(a.p.id)).hide();break; case "block": b("#lui_" + b.jgrid.jqID(a.p.id)).hide(); b("#load_" + b.jgrid.jqID(a.p.id)).hide() } }, – karthickeyan Sep 18 '19 at 23:29
i tried calling like => this.grid.aa.call(this); but showing error message Uncaught TypeError: Cannot read property 'call' of undefined – karthickeyan Sep 18 '19 at 23:30
@karthickeyan: You are right. `endReq` isn't saved in `this.grid` in the retro version 4.3.1. See **UPDATED** part my answer for the fixed code of `abortAjaxRequest`. – Oleg Sep 19 '19 at 06:37
Thanks @Oleg,You are the gem. Now it's working fine. i have changed 'ts.p.id' to 'this.p.id' in the $("#load_" + $.jgrid.jqID(this.p.id)).hide(); – karthickeyan Sep 19 '19 at 11:14
@karthickeyan: It's good news. I fixed ts to this in my answer. – Oleg Sep 19 '19 at 16:08
I am using the filtertoolbar in jqgrid, so how do i call the abortAjaxRequest function you mentioned, Because Jqgrid v4.3.1 don't have following events jqGridToolbarBeforeSearch – karthickeyan Sep 23 '19 at 06:57
@karthickeyan: I'm not sure what problem you mean. `filterToolbar` uses `reloadGrid`, which makes the same Ajax request. So the same callbacks (`loadBeforeSend`, `beforeProcessing` and `loadError`) be used. One can use the same `abortAjaxRequest` method to cancel the request. No additional code inside of jqGridToolbarBeforeSearch is required. If you do need some additional customization before Ajax request the you can use `beforeSearch` callback of `filterToolbar`. – Oleg Sep 23 '19 at 16:31
Hi @Oleg, We use 100's of grids in our application, can i apply this code in the jqgrid library itself, so this solution will work automatically for all grids, Currently we are not planning to upgrade our jqgrid library, so changing the jqgrids library code which is is fine for us. – karthickeyan Sep 25 '19 at 05:42
Hi @Oleg, Can we have this globally affecting jqgird core file it's okay for us. – karthickeyan Oct 01 '19 at 05:42
@karthickeyan: It depends on what you need and how you use jqGrid in other places. For example, you can create one JavaScript file, which you include directly after `jquery.jqGrid.min.js`. The file can register some new methods with respect of `$.jgrid.extend` (like `abortAjaxRequest`) and set some default jqGrid options and callbacks by setting there as properties of `$.jgrid.defaults`. The problem: it's just **defaults** and can be overwritten at any later usage. – Oleg Oct 01 '19 at 08:05
@karthickeyan: For example, if you set `loadError` via `$.jgrid.defaults` and you use `loadError` in some grid then `$.jgrid.defaults.loadError` will be **overwritten**. You can't provide more as one callback function in the grid. Because of that I suggested to implement jQuery **Events** additional to callbacks. See [the old answer](https://stackoverflow.com/a/6778789/315935) for the code examples. The events are introduced initially in version 4.3.2 and are extended in later versions. So, you can set globally affecting jqGird callbacks but only if you don't use the callbacks in jqGrid later. – Oleg Oct 01 '19 at 08:11

Automatically canceling reuest jqGrid on version 4.3.1

1 Answers1