Grid is not refreshing and add dialog is not closing after submit, why?

问题

I am struggling with this trying to:

• Refresh the grid content from remote
• Close add dialog

After I click on the submit button but it's not working for me since the dialog still open afterwards and the grid does not reload it's content. This is how my code looks like:

$(function () {
    "use strict";

    var manage_drugs_list_grid = $("#manage_drugs_list");
    manage_drugs_list_grid.jqGrid({
        colNames: ["Actions", "Drug Name", "Date Created"],
        colModel: [
            {name: "act", template: "actions", width: 50, align: "left"},
            {name: "DrugName", search: true, stype: "text", editable: true},
            {
                name: "DateCreated",
                search: true,
                editable: false,
                formatter: "date",
                sorttype: "date",
                formatoptions: {
                    newformat: "n/j/Y g:i:s A"
                },
                width: 50
            }
        ],
        cmTemplate: {
            width: 300,
            autoResizable: true
        },
        iconSet: "fontAwesome",
        rowNum: 25,
        guiStyle: "bootstrap",
        autoResizing: {
            compact: true,
            resetWidthOrg: true
        },
        rowList: [25, 50, 100, "10000:All"],
        viewrecords: true,
        autoencode: true,
        sortable: true,
        pager: true,
        toppager: true,
        hoverrows: true,
        multiselect: true,
        multiPageSelection: true,
        rownumbers: true,
        sortname: "Id",
        sortorder: "desc",
        loadonce: true,
        autowidth: true,
        autoresizeOnLoad: true,
        forceClientSorting: true,
        ignoreCase: true,
        prmNames: {id: "Id"},
        jsonReader: {id: "Id"},
        editurl: "/ajax/drugs/upsert",
        url: '/ajax/drugs/get',
        datatype: "json",
        formDeleting: {
            url: '/ajax/drugs/delete',
            delicon: [true, "left", "fa-scissors"],
            cancelicon: [true, "left", "fa-times"],
            width: 320,
            caption: 'Delete form',
            msg: 'Are you sure you want to delete this drug?',
            beforeShowForm: function ($form) {
                var rowids = $form.find("#DelData>td").data("rowids");

                if (rowids.length > 1) {
                    $form.find("td.delmsg").html('Are you sure you want to delete all the selected drugs?');
                }
            },
            afterComplete: function (response, postdata, formid) {
                if (response.responseText === "true") {
                    toastr["success"]("The form was deleted successfully.", "Information");
                } else {
                    toastr["error"]("Something went wrong, the form could not be deleted.", "Error");
                }
            }
        },
        navOptions: {
            edit: false,
            add: true,
            search: false,
            refresh: true
        },
        loadComplete: function () {
            var $self = $(this), p = $self.jqGrid("getGridParam");

            if (p.datatype === "json") {
                // recreate the toolbar because we use generateValue: true option in the toolbar
                $self.jqGrid("destroyFilterToolbar").jqGrid("filterToolbar");
            }
        }
    }).jqGrid('navGrid', {
        addtext: "Add",
        reloadAfterSubmit: true,
        closeAfterAdd: true,
        closeAfterEdit: true,
        reloadGridOptions: {fromServer: true}
    });
});

I have found this Oleg answer but is not working for me, pretty sure I am using the wrong syntax or the wrong events at the wrong place.

UPDATE:

After give Google another try I have found this question/answer: Close add dialog after submit which makes me go to the jQgrid Wiki and look through the available options in the navGrid and then go to form_editing page. After read those docs I've changed my code into:

.jqGrid('navGrid', {
    addtext: "Add",
    reloadGridOptions: {fromServer: true}
}, {
    addCaption: "Add new drug",
    closeAfterAdd: true,
    clearAfterAdd: true,
    closeOnEscape: true
}) 

However the changes doesn't make my issue to disappear. The caption is not overwritten, after add a new record the dialog does not close, hitting the ESC key doesn't make any changes meaning the dialog remains on the page and so on.

UPDATE #1:

After read jQgrid sources and look for some clue I give a 3rd try now by adding the following in the grid definition:

formEditing: {
    caption: 'Add new form',
    closeAfterEdit: true,
    closeOnEscape: true
},

Still not working.

Ideas?

来源：https://stackoverflow.com/questions/48289644/grid-is-not-refreshing-and-add-dialog-is-not-closing-after-submit-why