Jqgrid use afterSubmit event to get the ID of newly added record

Question

I am using the following code to add a new record.

jQuery("#list").jqGrid('editGridRow',"new",{height:545, width:425,recreateForm:true,reloadAfterSubmit:false,addedrow:'first',closeAfterAdd:true,top:110,left:350,modal:true});

I am using reloadAfterSubmit:false which means that when the new record is added to the grid, the ID field which I have is blank.

Can someone explain VERY simply how to get the ID of the new record and put it into the ID field in my grid.

I have found a previous answer here which seems to be what im looking for but I cant understand how to get it to work. The documentation says afterSubmit: function (response,postdata) {return [true, '', new_id];} but I have no how to implement this.

Im new so I need it put very simply.

Thanks for any help.

UPDATE: SERVER RESPONSE: response.responseText

( ! ) Notice: Undefined offset: 1 in D:\wamp\www\EstimateTracker\UpdateEstimates.php on line 32 Call Stack #TimeMemoryFunctionLocation 10.0036402872{main}( )..\UpdateEstimates.php:0
( ! ) Notice: Undefined offset: 2 in D:\wamp\www\EstimateTracker\UpdateEstimates.php on line 32 Call Stack #TimeMemoryFunctionLocation 10.0036402872{main}( )..\UpdateEstimates.php:0 String

UPDATE 2:

$(function () {
    $("#list").jqGrid({
        url:'GetEstimates.php',
        datatype: 'xml',
        mtype: 'GET',
        colNames:['ID','Campaign Name','ClientsID','Client Name','Buyer Name','Client Ref','Description','Sales','Estimator', 'Date Received', 'Date Required','Status','Product Type','Date Submitted','Price (&pound)', 'Keren No.','Reason Lost','Won Price (&pound)','Notes'],
        colModel :[ {name:'ID', key:true,index:'ID', width:45,align:'center',editable:true,editoptions:{readonly:true,size:10, height:5}, {name:'CampaignName', index:'CampaignName', width:175, align:'left',editrules:{required:true},editable:true,editoptions:{size:35}}, {name:'ClientsID', index:'ClientsID', width:120, align:'left',editable:true,hidden:true}, {name:'ClientName', index:'ClientName', width:120, align:'left',editrules: required:true,custom_func:notEmpty,custom:true},editable:true,edittype:'select', editoptions:{dataUrl:'ClientDropDownGrid.php',dataInit: function () {
        var thisval = $("#ClientsID").val();
        $.get('GetBuyersGrid.php?id='+thisval, function(data) {
            var res = $(data).html();
            $("select#BuyerName").html(res);
        }); // end get
    }//end func
    ,dataEvents:[{type:'change',fn: function(e) {
        var thisval = $(e.target).val();
        $.get('GetBuyersGrid.php?id='+thisval, function(data){
            var res = $(data).html();
            $("select#BuyerName").html(res);
        }); // end get
    }//end func
    } // end type
    ] // dataevents
    }}, 
    {name:'BuyerName', index:'BuyerName', width:100, align:'left',editable:true,edittype:'select',editoptions:{dataUrl:'BuyerDropDownGrid.php'}},
    {name:'ClientEstimateRef', index:'ClientEstimateRef', width:125, align:'left', align:'left',editable:true,editoptions:{size:25}},
    {name:'Description', index:'Description', width:125, align:'left', align:'left',editable:true,editoptions:{size:25}},
    {name:'SalesName', index:'SalesName', width:100, align:'left',editrules:{required:true,custom_func:notEmpty,custom:true},editable: true,edittype:'select',editoptions:{dataUrl:'SalesDropDownGrid.php'},formoptions:{elmsuffix: '<a id="AddSales" href="AddSales.php">Add Sales</a>' }},
    {name:'EstimatorName', index:'EstimatorName', width:100, align:'left',editrules:{required:true,custom_func:notEmpty,custom:true},editable: true,edittype:'select',editoptions:{dataUrl:'EstimatorDropDownGrid.php'} },
    {name:'DateReceived', index:'DateReceived', width:80, align:'center',editrules:{required:true,custom_func:isValidDateRec,custom:true},editable:true,editoptions: {size: 15, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: 'dd/mm/yy'}) } }}, 
    {name:'DateRequired', index:'DateRequired', width:80, align:'center',editrules:{required:true},editable:true,editoptions: {size: 15, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: 'dd/mm/yy'}) } }}, 
    {name:'Status', index:'Status', width:100, align:'left',editable: true,edittype:'select',editoptions:{dataUrl:'StatusDropDownGrid.php', defaultValue:'4'} },
    {name:'ProductType', index:'ProductType', width:100, align:'left',editrules:{required:true,custom_func:notEmpty,custom:true},editable: true,edittype:'select',editoptions:{dataUrl:'ProductTypeDropDownGrid.php'} },
    {name:'DateSubmitted', index:'DateSubmitted', width:80, hidden:false, align:'center',editable:true,editoptions: {size: 15, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: 'dd/mm/yy'}) } }},
    {name:'Price', index:'Price', width:60, align:'right',editrules:{required:true,custom_func:isCurrency,custom:true},editable:true, formatter:currencyFmatter, unformat:unformatCurrency,editoptions:{size:15,defaultValue:'0.00'}, formoptions:{elmsuffix: 'GBP'}},
    {name:'KerenNo', index:'KerenNo', width:80, align:'left',editable:true,editoptions:{size:20}},
    {name:'ReasonLost', index:'ReasonLost', width:120, align:'left',editable: true,edittype:'select',editoptions:{dataUrl:'ReasonLostDropDownGrid.php'} },
    {name:'WonPrice', index:'WonPrice', width:60, align:'right',editrules:{required:true,custom_func:isCurrency,custom:true},editable:true, formatter:currencyFmatter, unformat:unformatCurrency, editoptions:{size:15,defaultValue:'0.00'}, formoptions:{elmsuffix:'GBP'}},
    {name:'Notes', index:'Notes', width:125, align:'left', align:'left',editable:true,edittype:'textarea',editoptions:{dataInit: function(elem){$(elem).width(200); $(elem).height(45);}}}
    //{name:'total', index:'total', width:80, align:'right'}, 
    //{name:'note', index:'note', width:150, sortable:false} 
    ],
        pager: '#pager',
        rowNum:20,
        rowList:[10,20,30],
        sortname: 'ID',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        caption: 'Estimates',
        width:880,
        height:400,
        multiselect:true,
        editurl:'UpdateEstimates.php',
        shrinkToFit:false
    });
    //edit row
    $("#editButton").click(function(){
        var gr = jQuery("#list").jqGrid('getGridParam','selrow');    
        if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr,{height:545, width:425,recreateForm:true,reloadAfterSubmit:false,closeAfterEdit:true,top:110,left:350,viewPagerButtons:false,modal:true,beforeShowForm: function(form) { $('#tr_DateSubmitted', form).show();}});
        else alert("Please Select Row");
    });

    //add row
    $("#addButton").click(function(){
        //var gr = jQuery("#list").jqGrid('getGridParam','selrow');
        jQuery("#list").jqGrid('editGridRow',"new",{height:545, width:425,recreateForm:true,reloadAfterSubmit:false,afterSubmit: function(response){return [true,'','45765'];},addedrow:'first',closeAfterAdd:true,top:110,left:350,modal:true});
    });

});

Answer 1

You can try this for your new record function:

jQuery("#list").jqGrid('editGridRow',"new",{
    height:545,
    width:425,
    recreateForm:true, 
    addedrow:'first',
    closeAfterAdd:true,
    top:110, 
    left:350,
    modal:true,
    afterComplete: function(response, postdata, formid) {
        //force update of row data @ row 0 and column = ID, change the name of ID if your column name is different.  
        //We are using row 0 because we are assuming your new data is not in the first row
        $('#list').jqGrid('setCell', 0, 'ID','','','',true);
    }
});

This should reload the grid after you submit, if your submit was successful and your changes were saved to your data source, then when the grid reloads it will populate with the newly saved data, including the new ID.

To make the new ID show up as the first record, you need to set the sortname: 'ID' option in your grid and also sortorder: 'desc'. Then when you reload the grid, the highest ID will show up first.

** EDIT **

It looks like you can use the setCell method, and set the forceup property to true. check it out here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

Answer 2

The answer don't contains the code which you included. It just describes that afterSubmit should get the id of the new added row from the server response in some way and then returns [true, '', new_id] where new_id is the id of new row.

In the simplest form you can return the id of the new added row just in the body of the server response. So the value of the id will be probably in response.responseText. In the case you should use

afterSubmit: function (response) {
    return [true, '', response.responseText];
}