How to stop the url sending(setGridParam) request in Jqgrid?

Question

I have created external three checkbox.

First I check the Male check box, sending the request to backend,response taking time 30 to 50 Sec.But suddenly I press Female checkbox, not send the female value parameter to backend.

SO I want to stop sending the request. Send new request with new parameters.

The Previous request finished after send the new request.

When I check ‘All’, it takes 2-3 minutes to fetch the response. Until the response is got, no other parameter can be set/sent. For example: If I check ‘All’, I can’t send the parameter for uncheck/check ‘Male’ or ‘Female’ until I get the response for ‘All’. I use setGridParam and get the data in JSON format.

it takes 2-3 minutes to fetch

$("#sex,#age).change(function() {

var sexVal=$("#sex").val();
//sexVal values are Male, Female and All

var listURL='localset.php?mode=yes&sex='+sexVal;
$("#list451").jqGrid("clearGridData", true);
jQuery("#list451").jqGrid('setGridParam',{url : listURL,mtype:'POST',datatype:'json'}).trigger("reloadGrid");

});


jQuery("#list451").jqGrid({
    url: 'localset.php?mode=yes',
    datatype: "json",
    height: 255,
    width: 600,
    colNames: ['Index', 'Name', 'Code', 'N Name', 'C Name'],
    colModel: [{
            name: 'item_id',
            index: 'item_id',
            width: 65,
            sorttype: 'integer',
            searchoptions: {
                sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge']
            }
        }, {
            name: 'name',
            index: 'name',
            width: 150,
            sorttype: 'string',
            searchoptions: {
                sopt: [cn]
            }
        }, {
            name: 'code',
            index: 'code',
            width: 150,
            sorttype: 'string',
            searchoptions: {
                sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en']
            }
        }, {
            name: 'sex',
            index: 'sex',
            width: 150,
            sorttype: 'string',
            searchoptions: {
                sopt: [cn]
            }
        }, {
            name: 'c_name',
            index: 'c_name',
            width: 150,
            sorttype: 'string',
            searchoptions: {
                sopt: [cn]
            }
        },
        rowNum: 50,
        rowTotal: 200,
        rowList: [20, 30, 50],
        loadonce: true,
        mtype: "POST",
        rownumbers: true,
        rownumWidth: 40,
        gridview: true,
        pager: '#pager451',
        sortname: 'item_id',
        viewrecords: true,
        sortorder: "asc",
        caption: "External Check box Demo"
    }); jQuery("#list451").jqGrid('filterToolbar', {
    searchOperators: true
});

Answer 1

If I understand correctly your question you want to cancel previous Ajax request. You should do two things for it:

1. disable the overlay created at the beginning of the Ajax request
2. execute abort method of the pending Ajax request.

To remove overlay and to reset $("#list451")[0].grid.hDiv.loading used by jqGrid for internal purpose you can just call $("#list451")[0].endReq().

You can use loadBeforeSend callback for example to cache jqXHR of the last Ajax request. You need just save the first parameter of the callback in a variable defied in the outer scope. You can call abort() method to abort the previous request.