jqGrid inline edit: how to save again if post returns error

Question

jQgrid row is edited using inline editing mode. Pressing Enter sends data to server using http POST . POST method returns status 400 Bad reguest if there was some error. errorofunc in code below show error in this case. User corrects data in row and presses enter again.

Pressing enter is ignored, nothing happens. It looks like Enter key is unbound if 404 error is returned. Changes in edited row are lost, they cannot saved.

I tried to set in errorfunc

restoreAfterError = false; grid.restoreAfterErorr = false;

but row still cannot saved again after error.

How to allow to save correct row data after 400 error is returned ?

<script type="text/javascript">
var lastSelectedRow;
$(function () {
            var grid = $("#grid");
            grid.jqGrid({
                url: '/Grid/GetData',
                datatype: "json",
                mtype: 'POST',
                scroll: 1,
                multiselect: true,
                multiboxonly: true,
                scrollingRows : true,
                autoencode: true,
                colModel: [
        { name: 'Source', fixed: true, editable: true, width: 30 },
        { name: 'Est', fixed: true, editable: true, width: 271 },
        { name: 'Istopic', fixed: true, editable: true, width: 57 },
        {name: 'Critical', fixed: true, editable: true, width: 50}
    ],

                gridview: true,
                pager: '#pager',
                sortname: 'est',
                viewrecords: true,
                rowNum: 30,
                sortorder: "asc",
                editurl: '/Grid/Edit'
            });

            $("#grid").jqGrid('bindKeys', {
                onEnter: function(rowid) {
                    doeditRow(rowid);
                }
            }  );

        });

        function doeditRow(rowID) {
            var grid2 = $("#grid");
            if (rowID && rowID !== lastSelectedRow) {
                grid2.jqGrid('restoreRow', lastSelectedRow);
                lastSelectedRow = rowID;
            }
            invokeEditRow();
        }

        function errorfunc(rowID, response) {
            // todo: why this does not allow Enter key to continue ase after error:
            restoreAfterError = false;
            $("#grid").restoreAfterErorr = false;
            alert(response.responseText);
            lastSelectedRow = rowID;
            invokeEditRow();
            return true;
        }


        function invokeEditRow() {
             $("#grid").jqGrid('editRow', lastSelectedRow ,true,null, null, null, {},
                 null,
                 errorfunc
             );
        }
    </script>

<div id="grid1container" style="width: 100%;">
    <table id="grid">
    </table>
    <div id="pager">
    </div>
</div>

UPDATE: errrofunc calls editrow which according to https://github.com/tonytomov/jqGrid/blob/master/js/grid.inlinedit.js should set enter key again to save. For unknown reason this does not occur.

UPDATE: in errorfunc grid. is changed to

        $("#grid").restoreAfterErorr = false;

according to Oleg comment

Oleg · Accepted Answer · 2011-06-03T09:19:07.060

1

You use variable grid inside of errorfunc implementation (grid.restoreAfterErorr). The grid is undefined and you have exception in the line.

UPDATED: ou should replace alert(response.responseText); to

$.jgrid.info_dialog($.jgrid.errors.errcap,'<div class="ui-state-error">'+
    response.responseText +'</div>', $.jgrid.edit.bClose,{buttonalign:'right'});

to see the same styled dialog box as in the standard case. The errorfunc from the inline editing is responsible to display the error message itself.

edited Jun 03 '11 at 09:19

answered Jun 02 '11 at 17:52

Oleg

220,925
34
403
798

@Oleg: Thank you. I updated testcase by changing `grid` to `$("#grid")`. Problem persists. To test this you can use the same private test url which I sent to you. Enter more than 30 characters to first (Allikas) column and press enter. Error message appears. Edit Allikas columns to have less that 30 characters and press Enter again. This enter press is ignored, data is not saved. How to save data after error ? Btw. For unknow reason even if grid. is used, exception does not occur in grid. line. Proper alert box with error from database still appears. – Andrus Jun 03 '11 at 07:04
@Andrus: Could you replace `jquery.jqGrid.min.js` to `jquery.jqGrid.src.js`? – Oleg Jun 03 '11 at 07:26
@Andrus: It seems I start to understand what wrong is in your site. You enter in the editing mode too frequently. For example inside of `errorfunc` you should not call `invokeEditRow`. Moreover it seems that if you press enter to save the row contain you not only save it, but additionally receive the `keypress` event to start inline editing (see `bindKeys`) which follows to very stranger behavior. – Oleg Jun 03 '11 at 07:51
@Andrus: See **UPDATED** part of my answer. – Oleg Jun 03 '11 at 09:19
@Oleg: I added all changes you required to the test url. Problem persists. I removed editRow call from errorfunc. After that row cannot edited after error at all. I tried to change errorfunc error message to modeless like in loaderror but this message does not appear. – Andrus Jun 03 '11 at 15:08
@Andrus: The code of `errorMessage` has too many errors and you produce exception. For example in the statement `$('#' + $("#grid").id + '_err').remove();` you should replace `$("#grid").id` to `$("#grid")[0].id`. In the next statement you use `grid.closest`, but you don't define `var grid=$("#grid");` before. So exception will be thrown. In the same statement you has much more errors where you try to use `$("#grid").id` and `$("#grid").style` instead of `$("#grid")[0].id` and `$("#grid")[0].style`. Probably the real problem will come later, but one have to fix the code of errorMessage before. – Oleg Jun 03 '11 at 17:07
@Oleg: Thank you very much. I fixed errorMessage procedure in testcase. Now it shows error message properly. I dont understand when `$("#grid")[0]` and when `$("#grid")` should be used. – Andrus Jun 03 '11 at 17:33
@Andrus: It's very easy. There are DOM element which correspond `` element. The jQuery object `$("#grid")` is the wrapper over the element. If no element with `$("#grid")` exist you can verify this using `$("#grid").length`. If selector used in `$("#grid")` do find DOM elements you can access the elements with respect of indexer: `$("#grid")[i]`. Because id selector '#' get back always one elements (if you don't have double ids bug on your page) you will always get with `$("#grid")[0]` the DOM element which has `id` `style` and other properties.
– Oleg Jun 03 '11 at 17:45
@Andrus: if you need use **jQuery methods** like `closest`, `parent`. `text`, `attr`. `bind` and so on you should use jQuery object: `$("#grid")`. So you should just know which methods and properties has jQuery wrapper object and which methods and properties (from W3 specification) has DOM element. – Oleg Jun 03 '11 at 17:48
@Oleg: Thank you very much for clear explanation. No we have modeless non-offensive error message if error occurs on save. – Andrus Jun 03 '11 at 17:53

jqGrid inline edit: how to save again if post returns error

1 Answers1

Linked