Question

I developing a web application using JSP & Servlet (IDE: Eclipse, Database: Oracle10).

I am using JQGRID to display data in tabular format. I also want functionality of Add, Edit, Delete in JQGRID. So far I have completed Edit Functionality.

Now I want Delete functionality, the problem is that I am not able to pass data from JQGRID to servlet.

Following is my source code:

jQuery("#list10_d2").jqGrid({
                height: "100%",
                url:'ProtocolJGridServChildStages?q=2&action=protStages',
                datatype: "xml",
                 colNames:['Sr. No.','PROTOCOL_ID',  'STAGE_ID',  'DESCRIPTION'],
                 colModel:[{name:'srNo',index:'srNo', width:35,sortable:true},
                           {name:'PROTOCOL_ID',index:'PROTOCOL_ID', width:100,sortable:false},
                           {name:'STAGE_ID',index:'STAGE_ID', width:100,sortable:false},
                           {name:'DESCRIPTION',index:'DESCRIPTION', width:150,sortable:false,editable:true}
                           ],
                rowNum:5,
                rowList:[2,4,10],
                pager: '#pager10_d2',
                sortname: 'PROTOCOL_ID',
                viewrecords: true,
                sortorder: "asc",
                multiselect: true,
                editurl: "ProtocolJGridServChildStages?action=protocolStageEdit",
                caption:"CRM_PROT_STAGES",
                onSelectRow: function(ids)
                {
                    if(ids && ids!==lastsel)
                    {               
                        var ret = jQuery("#list10_d2").jqGrid('getRowData',ids);
                        protID = ret.PROTOCOL_ID;
                        alert(protID);
                        stageID = ret.STAGE_ID;
                        alert(stageID);

                        jQuery("#list10_d2").jqGrid('setGridParam',{}, {editurl:'ProtocolJGridServChildStages?action=protocolStageEdit&protID='+protID+'&stageID='+stageID});
                        jQuery('#list10_d2').jqGrid('restoreRow',lastsel);
                        jQuery('#list10_d2').jqGrid('editRow',ids,true);
                        lastsel=ids;
                    }
                }
            });
            jQuery("#list10_d2").jqGrid('navGrid','#pager10_d2',{add:true,edit:true,del:true},{width:500},{width:500,url: 'ProtocolJGridServChildStages?action=protocolStageAdd&protID='+protID, closeAfterAdd: true},{mtype: 'GET',url: 'ProtocolJGridServChildStages?action=protocolStageDelete&protID='+protID});
            jQuery("#ms1").click( function() {
                var s;
                s = jQuery("#list10_d2").jqGrid('getGridParam','selarrrow');
                alert(s);
            });

I am getting protID value undefined in my DeleteServlet.

Answer 1

You use protID in the url in the wrong way. The value of url option used for Delete operation will be set once during executing of the call of navGrid. At the moment you not yet set any value for the variable protID. You can fix the code you can use one from the following ways: onclickSubmit, delData, beforeSubmit or serializeDelData.

I am wounder a little that you use mtype: 'GET' option for delete operation. Typically one use HTTP POST or HTTP DELETE in the case. If you really need mtype: 'GET' you can replace

{
    mtype: 'GET',
    url: 'ProtocolJGridServChildStages?action=protocolStageDelete&protID=' + protID
}

parameter of navGrid to

{
    mtype: 'GET',
    url: 'ProtocolJGridServChildStages',
    delData: {
        action: 'protocolStageDelete',
        protID: function () {
            return protID;
        }
    }
}

or alternatively

{
    mtype: 'GET',
    url: 'ProtocolJGridServChildStages',
    onclickSubmit: function (options, rowid) {
        var rowData = jQuery(this).jqGrid('getRowData', rowid);
        return {
            action: 'protocolStageDelete',
            protID: ret.PROTOCOL_ID
        };
    }
}

If you do consider to use mtype other as GET, but will need to set protID as part of URL you can modify url option dynamically inside of onclickSubmit or beforeSubmit callback. For example

{
    mtype: 'GET',
    onclickSubmit: function (options, rowid) {
        var rowData = jQuery(this).jqGrid('getRowData', rowid);
        options.url = 'ProtocolJGridServChildStages?' + jQuery.param({
            action: 'protocolStageDelete',
            protID: ret.PROTOCOL_ID
        });
    }
}

You can choose yourself the way which better corresponds your requirements.