How to make an Ajax call when doing an inline edit

Question

I am using the free jqgrid to edit a list of descriptions. This works as I want it to but I cannot find how to persist these changes with an Ajax call to the server.

<div id="divLoading" class="has-error">Loading ...</div>
<table id="grid"></table>
<div id="pager"></div>

$(function () {
    var data = GetHiddenField("sir-standard-faults-for-category");
    populateGrid(data.FaultCategoryDetails);
});

var populateGrid = function (data) {
    var grid = $("#grid");
    var lastSel = 0;
    grid.jqGrid({
        data: data,
        colNames: ["FaultCategoryDetailId", "Fault"],
        colModel: [
            { name: "FaultCategoryDetailId", index: "FaultCategoryDetailId", width: 65, align: "center", hidden: true, key: true },
            { name: "Description", label: "Description", width: 500, align: "center", editable: true }
        ],
        cmTemplate: { autoResizable: true, align: "center" },
        rowNum: 20,
        pager: "#pager",
        shrinkToFit: true,
        rownumbers: true,
        sortname: "Description",
        viewrecords: true,
        onSelectRow: function (FaultCategoryDetailId) {
            if (FaultCategoryDetailId && FaultCategoryDetailId !== lastSel) {
                jQuery("#grid").restoreRow(lastSel);
                lastSel = FaultCategoryDetailId;
            }
            jQuery("#grid").editRow(FaultCategoryDetailId, true);
        },
        oneditfunc: function() { alert("put ajax call here?"); }
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
    $("#divLoading").hide();
}

EDIT 2: This is a correction from the last edit, although this one did not work either; I put oneditfunc: function() { alert("editsave"); } in the code with the intention of capturing the "enter" event after the row is edited. I do not know if this is in the free version of jqGrid as it does not work. Or more likely it is wrong anyway.

Sorry, but I don't understand your question. 1) You display "#divLoading" on the page. Why you need it? At least it should have `style="display: none;"` initially. 2) Your code don't contain any Ajax request. What you want to persist? 3) You edit the data **locally** only. Do you want to save the modified rows to the server or you plan to get the modified grid data later and send new data back to the server? — Oleg, Sep 26 '17 at 14:51
1/ The "#divLoading" is used to display "loading" until the data in the grid is rendered. Not relevant for this question really. 2/ I do not know where to put the Ajax request which is why it is not there, 3/ Yes in addition to saving the data locally, I want to make an AJAX call to the server to persist the changes at the same time the data is persisted locally. I hope this clarifies? — arame3333, Sep 26 '17 at 15:00
I want to edit and persist the Description field, which will mean I also need to send the FaultCategoryDetailId in the AJAX call. — arame3333, Sep 26 '17 at 16:07
So what I want is that when I edit a cell and press the enter key to save the change, I want to trigger an event which will make the ajax call to persist the change. — arame3333, Sep 27 '17 at 06:09

score 1 · Accepted Answer · answered Sep 27 '17 at 07:53

1

jqGrid contains already build-in possibility to save the data on the server with respect of Ajax request. You need just add editurl option to the grid. You don't need to create hidden column with the id. Instead of that you can inform jqGrid about the name of property, which hold the information. You can remove FaultCategoryDetailId column from colModel and add the following options instead:

prmNames: { id: "FaultCategoryDetailId" },
localReader: { id: "FaultCategoryDetailId" },

See https://jsfiddle.net/OlegKi/neg0e0o2/ as an example. You can see in Developer Tools, that on press Enter jqGrid POST to editurl the data like

Description=Modified text
oper=edit
FaultCategoryDetailId=20

answered Sep 27 '17 at 07:53

Oleg

220,925
34
403
798

That is excellent, I really like not having to put a hidden column in my grid. I am sure this is the answer but I would like to be able to edit the editUrl, as I want to call a webapi (apologies if you can't answer this) which defines the end part of the url as [HttpPost("{faultCategoryDetailId}/{description}/updatestandardfault")] So setting the parameters will probably not format them as above. – arame3333 Sep 27 '17 at 08:18
1

@arame3333: You can extend `inlineEditing` with additional options, which defines HTTP method and set URL dynamically. Look at [the answer](https://stackoverflow.com/a/34721322/315935) for example. What information you need to sent and in which format exactly? – Oleg Sep 27 '17 at 08:23
@arame3333: Do you gave progress with implementing of your requirements? I'm not sure what URL you want to have exactly, but I think that you need to include in `inlineEditing` option the property `url: function (rowid, editOrAdd, postData, options) { return "/" + encodeURIComponent(postData.FaultCategoryDetailId) + "/" + encodeURIComponent(postData.Description) + "/updatestandardfault"; }` .ile in https://jsfiddle.net/OlegKi/neg0e0o2/1/ – Oleg Sep 27 '17 at 09:13
@arame3333: You are welcome! I see that the problem is solved now. – Oleg Sep 27 '17 at 09:14
This is what I did; inlineEditing: { keys: true, url: function (FaultCategoryDetailId) { var $self = $(this); var description = $self.jqGrid("getCell", FaultCategoryDetailId, "Description"); var url = GetHiddenField("sir-edit-standard-fault-url") .replace("#", FaultCategoryDetailId) .replace("@", description); return url; }, mtype: "PUT" }, – arame3333 Sep 27 '17 at 09:19
I can now see I can get the Description from postData – arame3333 Sep 27 '17 at 09:21
1

It's better don't use `getCell` on the cells, which are in editing mode. You can access to the modified data via the next parameter of `url` function: the `postData` parameter. See my previous comment. – Oleg Sep 27 '17 at 09:21

How to make an Ajax call when doing an inline edit

1 Answers1