What causes jqgrid events to fire multiple times?

monkeydeus

Our jqgrid is configured in an initgrid function that is called as the last statement of a ready handler. For some reason, the gridcomplete function is getting called multiple times. With the code below, it gets called twice, but it had been getting called 3 times. Twice is bad enough. After stepping through it multiple times, I don't see what is triggering the second execution of the gridComplete function.

When I hit the debugger at the start of gridComplete, the call stack is virtually identical each time, the only difference being a call to 'L' in the jqgrid:

callstacks:

Anyone have an idea why this is occurring? We are using the free version 4.13, in an ASP.net MVC application.

$(function(){
    ....
    initGrid();
}

function initGrid(){
$gridEl.jqGrid({
        xhrFields: {
            cors: false
        },
        url: "/IAConsult/GetWorkFlowIARequests",
        postData: {
            showAll: showAllVal,
            role: role,
            IsIAArchitect: userIsIA
        },
        datatype: "json",
        crossDomain: true,
        loadonce: true,
        mtype: 'GET',
        sortable: true,
        viewrecords: true,
        pager: '#workFlowIAGridPager',
        multiselect: true,
        rowNum: 50,
        autowidth: true,
        colModel: [...],
        beforeSelectRow: function (rowid, e) {
            var $myGrid = $(this),
                i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
                cm = $myGrid.jqGrid('getGridParam', 'colModel');
            return (cm[i].name === 'cb');
        },
        jsonReader: {
            repeatitems: true,
            root: "IAConsultWorkflowRequestsList"
        },
        beforeSubmitCell: function (rowid, name, value, iRow, iCol) {
            return {
                gridData: gridData
            };
        },
        serializeCellData: function (postdata) {
            return JSON.stringify(postdata);
        },
        gridComplete: function () {
            console.log('grid complete');
            let rowIDs = $gridEl.getDataIDs();
            let inCompleteFlag = false;
            let dataToFilter = $gridEl.jqGrid('getGridParam', 'lastSelectedData').length == 0
                ? $gridEl.jqGrid("getGridParam", "data")
                : $gridEl.jqGrid('getGridParam', 'lastSelectedData');
            let $grid = $gridEl, postfilt = "";
            let localFilter = $gridEl.jqGrid('getGridParam', 'postData').filters;
            let columnNames = columns.split(',');

            $('.moreItems').on('click', function () {
                $.modalAlert({
                    body: $(this).data('allitems'),
                    buttons: {
                        dismiss: {
                            caption: 'Close'
                        }
                    },
                    title: 'Design Participants'
                });
            });

            rowCount = $gridEl.getGridParam('records');
            gridViewRowCount = rowCount;

            let getUniqueNames = function (columnName) {
                ...             };

            let buildSearchSelect = function (uniqueNames) {
                var values = {};
                values[''] = 'All';
                $.each(uniqueNames,
                    function () {
                        values[this] = this;
                    });
                return values;
            };

            let setSearchSelect = function (columnName) {
                ...

            };

            function getSortOptionsByColName(colName) {
                ...
            }



            $grid.jqGrid("filterToolbar",
                { stringResult: true, searchOnEnter: true });


            if (localFilter !== "" && localFilter != undefined) {
                globalFilter = localFilter;
            }

            let grid = $gridEl.jqGrid("setGridParam",
                {
                    postData: {
                        "filters": globalFilter,
                        showAll: showAllVal,
                        role: role,
                        IsIAArchitect: userIsIA
                    },
                    search: true,
                    forceClientSorting: true
                });

            //grid.trigger("reloadGrid");
            //Ending Filter code


            for (i = 0; i < columnNames.length; i++) {

                var htmlForSelect = '<option value="">All</option>';
                var un = getUniqueNames(columnNames[i]);
                var $select = $("select[id='gs_workFlowIAGrid_" + columnNames[i] + "']");
                for (j = 0; j < un.length; j++) {
                    val = un[j];

                    htmlForSelect += '<option value="' + val + '">' + val + '</option>';
                }
                $select.find('option').remove().end().append(htmlForSelect);
            }
            debugger;
        },

        // all grid parameters and additionally the following
        loadComplete: function () {
            $gridEl.jqGrid('setGridWidth', $(window).width(), true);
            $gridEl.setGridWidth(window.innerWidth - 20);
        },

        height: '100%'
    });
Oleg

I personally almost never use gridComplete callback. It exists in free jqGrid mostly for backwards compatibility. I'd recommend you to read the old answer, which describes differences between gridComplete and loadComplete.

Some additional advices: it's dangerous to register events inside of callbacks (see $('.moreItems').on('click', ...). If you need to make some actions on click inside of grid then I'd recommend you to use beforeSelectRow. Many events, inclusive click event supports event bubbling and non-handled click inside of grid will be bubbled to the parent <table> element. You use already beforeSelectRow callback and e.target gives you full information about clicked element.

I recommend you additionally don't use setGridParam method, which can decrease performance. setGridParam method make by default deep copy of all internals parameters, inclusive arrays like data, which can be large. In the way, changing one small parameter with respect of setGridParam can be expensive. If you need to modify a parameter of jqGrid then you can use getGridParam without additional parameters to get reference to internal object, which contains all jqGrid parameters. After that you can access to read or modify parameters of jqGrid using the parameter object. See the answer for example for small code example.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Bootstrap 3.3.2 Modal events fire multiple times

Console.log useState causes it to fire multiple times - React Native

Fire ajax multiple times

jQuery fire multiple times

What would cause click event to fire multiple times?

Fire Observable bindCallback multiple times

What would cause an ajax request to fire multiple times from a jQuery dialogue button

What causes jQuery click event not always to fire?

SendGrid Events are running multiple times

OnMarkerClick events fires multiple times

Nested events triggered multiple times

Multiple click events fire on a single click GWT

Listen to multiple events on the same element to fire

JQuery listen multiple events, but fire only once

Overriding OnClientClick causing validation to fire multiple times

Fire off function after multiple times

What causes long spin and sync times in Java?

Image is multiplied three times in OpenCV, what causes this?

Concat causes stack overflow if called multiple times

Masstransit with multiple consumers of same message fire multiple times in .NET 6

Events being received multiple times - Greenrobot eventbus

jQuery click events firing multiple times

Make events run multiple times, Highcharts

A robust solution for FileSystemWatcher firing events multiple times

Angular BehaviorSubject events emited multiple times

What causes the interactive grid's "move" notification to fire?

Show/Hide is not working correctly in Chrome when multiple click events fire

Fire QraphQl subscription resolver multiple times per single change

Where to put addEventListener so it doesn't fire multiple times