How do I send data from my JQGrid to my query to d

Question

I am unable to delete a row from my JQGrid because I can't figure out how to send the data I need to the file that holds the MySQL. I am using ColdFusion.

In my JQGrid file, my editurl parameter is set as such:

editurl: url+"process_delete.cfc?method=process_delete&region="+region,

In my process_delete.cfc file, that holds my MySQL queries, I have this:

DELETE FROM awesome_table
WHERE region = '#region#' AND Field1 = '??????' AND Field2 = '???????'

I know that the MySQL is being reached - no problems there. Also, the region is populated just fine from the URL. No problems there. The problem is that I can't figure out how to access the data from the row I'm trying to delete in order to populate Field1 and Field2, effectively completing the query. Can anyone help? Thanks.

For Delete I have the following code:

jQuery.jgrid.del = {
            caption: "Delete Item",
            msg: "Delete record?",
            bSubmit: "Delete",
            bCancel: "Cancel",
            beforeSubmit: function(postdata, formid) { 
                var rowid = $("#mygrid").getGridParam('selrow');
                $("#mygrid").jqGrid('saveRow',rowid,false,'clientArray');
                var rowvalues = $("#mygrid").getRowData(rowid);
                return [true, ""]
            }

When I display the rowid in an alert message box, I get "null" back, so maybe that's where my problem stems from.

Answer 1

Cannot really help much without seeing your code that comes back from your CFC to populate the grid. However, one approach is to access the id of the row and put it in some HTML element like an anchor tag, for example:

If you are creating a loop to prepare your data

//Some loop
<cfset dataRows[i]['id'] = #yourqueryId# />
<cfset dataRows[i]['cell'] = "<a href="##" class="delete" id="#yourqueryId#">Delete</a>" />

Then you pass your JSON object to the CFM file

 <cfset JSONReturn = {total=#totalPages#,page=#page#,records=#recordcount#,rows=dataRows} />

Then in the page that displays the grid add an event that handles the click of the anchor tag

$('a.delete').on('click', function(){
    var id = $(this).attr('id');
    //do something with the id
})

Hope that helps!

Answer 2

You can either use delData with the properties field1 and field2 defined as functions or to use onclickSubmit or beforeSubmit in which you can dynamically modify the URL used in the DELETE operation or to use serializeDelData callback. The best way could depend on other options which you use (for example depends on mtype used for Delete operation). In the answer I included the references to other answers which shows all the ways in details.

For example you can use

onclickSubmit: function (options, rowid) {
    // we suppose that use don't use multiselect: true option
    // in the case rowid parameter if the string with the id of the
    // deleted row

    // we can get the data about the deleted row with respect of
    // getCell, getLocalRow or getRowData methods
    var rowData = $(this).jqGrid("getRowData", rowid);

    // now we can modify the URL used in the Delete operation
    options.url += "?" + $.param({
        field1: rowData.field1,
        field2: rowData.field2
    });

    return {}; // you can return additional data which will be sent to the server
}