How do I send data from my JQGrid to my query to delete a row?

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

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
}