jqGrid: How To Delete Row/s From "navButtonAdd" And "delGridRow"?

Question

I've encountered a problem with jqGrid datagrid. I need to delete one row or more with a button "Delete". Here my code:

$grid.navGrid('#pager', { edit: false, add: false, del: false, search: false });
$grid.navButtonAdd('#pager', {
    caption: "Delete",
    buttonicon: "ui-icon-del",
    position: "last",
    onClickButton: function() {
        alert("Deleting Row");
        row_ids = $grid.getGridParam('selarrrow');
        $grid.delGridRow(row_ids, {
            dataType: 'json',
            mtype: 'GET',
            url: '<?php echo $_SERVER['PHP_SELF'].'?app=my_app&action=record_delete'; ?>'
        });
    }
});

This snippet of code send to the "url:" option the id/s of selected row/s (it works). That url return a response, in json format.. This answer say if the operation was successful or not. I need to display an alert with that message, how do I do? And, another problem, when I click on "Delete" button (on bottom of the jqGrid), it displays an ajax windows with the question "Do you want to delete selected items?", with the "Yes" input and the "No" input. When I click "Yes", this ajax window will not close!

Thank you!

Dante

EDIT [1] && [2]

$(document).ready(function()
{
    $grid = $("#list");
    fixPositionsOfFrozenDivs = function() {
        if (typeof this.grid.fbDiv !== "undefined") {
            $(this.grid.fbDiv).css($(this.grid.bDiv).position());
        }
        if (typeof this.grid.fhDiv !== "undefined") {
            $(this.grid.fhDiv).css($(this.grid.hDiv).position());
        }
    };

    $grid.jqGrid({
        url: '<?php echo $_SERVER['PHP_SELF'].'?app=my_app&option=get_records'; ?>',
        datatype: 'json',
        mtype: 'GET',
        height: 'auto',
        width: window.innerWidth-35, //width: '1225',
        colNames: ['ID', 'Column A', 'Column B', 'Column C', 'Column D'],
        colModel: [
            { name: 'id', index: 'id', width: 130, align: 'center', search: true,
                sortable: true, frozen: true, editable: true, edittype: 'text', formatter: 'showlink',
                editoptions: { size: 130, maxlength: 50 }, stype: 'text' },
            { name: 'col_a', index: 'col_a', width: 250, align: 'left', search: true,
                sortable: true, frozen: false, editable: true, edittype: 'text',
                editoptions: { size: 250, maxlength: 40 }, stype: 'text' },
            { name: 'col_b', index: 'col_b', width: 120, align: 'left', search: true,
                sortable: true, frozen: false, editable: true, edittype: 'text',
                editoptions: { size: 120, maxlength: 40 }, stype: 'text' },
            { name: 'col_c', index: 'col_c', width: 100, align: 'right', search: true,
                sortable: true, frozen: false, editable: true, edittype: 'text',
                editoptions: { size: 100, maxlength: 40 }, stype: 'text' },
            { name: 'col_d', index: 'col_d', width: 100, align: 'right', search: true,
                sortable: true, frozen: false, editable: true, edittype: 'text',
                editoptions: { size: 100, maxlength: 6 }, stype: 'text' }
        ],
        caption: 'Objects',
        pager: '#pager',
        sortname: 'id',
        sortorder: 'ASC',
        rowNum: 25,
        rowList: [25, 50, 100, 200, <?php echo $totrecords; ?>],
        loadonce: true,
        gridview: true,
        viewrecords: true,
        rownumbers: true,
        rownumWidth: 40,
        toppager: true,
        multiselect: true,
        autoencode: true,
        ignoreCase: true,
        shrinkToFit: false,
        loadComplete: function() {
            $("option[value=<?php echo $totrecords; ?>]").text('All');
        },
        editurl: '<?php echo $_SERVER['PHP_SELF'].'?app=my_app&option=delete_records'; ?>'
    });

    $grid.jqGrid('filterToolbar', {multipleSearch: false, stringResult: false, searchOnEnter: false, defaultSearch: 'cn'});
    $grid.navGrid('#pager', { edit: false, add: false, del: false, search: false });
    $grid.navButtonAdd('#pager', {
        caption: "Delete",
        buttonicon: "ui-icon-del",
        position: "last",
        onClickButton: function() {
            row_ids = $grid.getGridParam('selarrrow');
            $grid.delGridRow(row_ids, {
                closeOnEscape: true,
                mtype: 'POST',
                afterSubmit: function(data_from_server, array_data) {
                    var result = data_from_server.responseText;
                    var message = eval('(' + result + ')');
                    alert(message.query);
                }
            });
        }
    });

    $grid.jqGrid('setFrozenColumns');
    $grid[0].p._complete.call($grid[0]);
    fixPositionsOfFrozenDivs.call($grid[0]);

});

score 1 · Answer 1 · answered May 30 '12 at 13:39

You should be able to use the afterSubmit event to display your message. From the jqGrid documentation:

afterSubmit

fires after response has been received from server. Typically used to display status from server (e.g., the data is successfully deleted or the delete cancelled for server-side reasons). Receives as parameters the data returned from the request and an array of the posted values of type id=value1,value2. When used this event should return array with the following items [success, message] where success is a boolean value if true the process continues, if false a error message appear and all other processing is stopped.
afterSubmit : function(response, postdata) 
{ 
  … 
  return [succes,message] 
}

Regarding your second problem, I am not sure why the Ajax window will not close. Have you debugged the code to see if you are receiving a JavaScript error at that time? If not, it may be necessary for you to post a small example demonstrating the problem.

I had read this documentation.. But there aren't any examples and, on top of that, they are listless. Look: "should return array with the following items [success, message] where success is a boolean value" and "return [succes,message] ", they have omitted one "s" at the function "return" time. However, thank you! **And now, missing only the second problem**. I haven't found any error.. I will post the code entirely [2]. — D4nt3, May 31 '12 at 08:32

score 0 · Answer 2 · answered May 30 '12 at 14:20

0

It's not good to use HTTP GET for delete operation. Do you want that the previous server response on the same URL will be cached and not send to the server? Default value of mtype is 'POST'. If you have RESTfull services on the server side you will need to use mtype: 'DELETE', but the usage of 'GET' can have sense only for the some dummy code which don't delete anything on the server.

Moreover you use dataType: 'json' parameter which is not exist for delGridRow (see the documentation). Even if you would use ajaxDelOptions: { datyType: "json" } you will get the server response (see the answer of Justin) not automatically converted from JSON to object. The reason is that the current code of delGridRow use complete callback instead of success callback (see here). So if you get JSON response from the server you will have to call $.parseJSON explicitly inside of afterSubmit callback (see the Justin's answer).

answered May 30 '12 at 14:20

Oleg

220,925
34
403
798

Thank you for your suggestion about HTTP Method, but first, in my opinion, you have to know how the web module is coded :) however, I've used the GET Request only to debug with Firebug :) I didn't know that I have to parse (in jSon) the response of the server, thank you so much! I've edited the code in my original question [1] – D4nt3 May 31 '12 at 08:11
@D4nt3: You can debug in Firebug any HTTP requests and not only GET. To understand the problem you can just delete the line in the grid, then create the same row with the same id and delete the row one more time. The second delete request will be not sent in Internet Explorer for example to the server and the data will be deleted only locally. If you reload the grid you will see that the row on the server is *not deleted*. It will be because use used HTTP GET instead of DELETE or POST. By the way the reason of your second problem can be missing CSS or wrong order of JavaScript files. – Oleg May 31 '12 at 19:17

jqGrid: How To Delete Row/s From "navButtonAdd" And "delGridRow"?

2 Answers2