Reload jQgrid on Bootbox closing

Question

I have jQGrid v4.6.0 (I can reproduce the same issue with Free jqGrid) on my page which I can reload using:

$('#jqGrid').trigger('reloadGrid');

It loads data by posting to a server. It posts correctly, gets the returned data correctly, and shows the correct data in the grid.

On the same page I have a link which opens a Bootbox dialog. Calling reloadGrid from within a Bootbox callback seems to make $('#jqGrid').jqGrid "not a function"

bootBoxWindow = bootbox.dialog({
    title: "title",
    message: "foo",
    size: "large",
    closeButton: false,

    buttons: {
        ok: {
            label: "Save 2",
            className: "btn-success",
            callback: function () {
                $('#jqGrid').trigger('reloadGrid');

            }
        }
    }
});

When this calls reloadGrid, jqGrid properly posts to my server and retrieves the latest data. However, inside the loadComplete event I can no longer refer to jQuery("#jqGrid").jqGrid.

Example:

jQuery("#jqGrid").jqGrid('showCol', 3);

... calling this inside loadComplete gives error: TypeError: jQuery("#jqGrid").jqGrid is not a function"

I get the same error when using $(this) instead of jQuery("#jqGrid").

I cannot reproduce the issue without Bootbox. If I load the grid, then use this:

setTimeout(function () {
    $('#jqGrid').trigger('reloadGrid', [{ current: true }]);
}, 10000);

... there is no error.

Can you please show us the whole code or use jsfiddle.net to show us the problem. Note that the full example including the order of loading the script and their places is important - i.e with other words a working example of the problem. — Tony Tomov
@TonyTomov I'll have to spend some time stripping out stuff that can't be shown (this code is for work). But nothing stands out in your mind as to why the described is happening? — Developer Webs

Tony Tomov Tony Tomov · Accepted Answer · 2019-02-27T21:19:01

The first that I think is that the modal function is outside the jqGrid scope. Example:

(function($) { 
    $(function() {
        ....
        var $grid = $("#grid").jqGrid({...});
        .....
        console.log($grid);
    });
})(jQuery);

console.log($grid);

The first console.log will output grid object, the second will throw error.

You may want to look at this article

Reload jQgrid on Bootbox closing

1 Answers